Input colors

  1. MDB Home Page
  2. Support Main Page
  3. General Bootstrap questions
Topic: Input colors

Nikola Zoric pro asked 8 years ago

Hello everybody I'm wondering is there an easy way to change color of input fields when they have :active :hover state. Default color is some variant of blue color. I'm using forms with btn-dark-orange, so I was wondering if i can change that input color to same orange? Thanks in advance

Josip Tomašev pro premium priority answered 8 years ago

Hello Nikola In CSS you can find setting: 

input[type=date]:focus:not([readonly]), input[type=datetime-local]:focus:not([readonly]), input[type=email]:focus:not([readonly]), input[type=number]:focus:not([readonly]), input[type=password]:focus:not([readonly]), input[type=search-md]:focus:not([readonly]), input[type=search]:focus:not([readonly]), input[type=tel]:focus:not([readonly]), input[type=text]:focus:not([readonly]), input[type=time]:focus:not([readonly]), input[type=url]:focus:not([readonly]), textarea.md-textarea:focus:not([readonly]) {
    border-bottom: 1px solid #4285F4;
    box-shadow: 0 1px 0 0 #4285F4;
}
Put this code in your CSS, and just change border-bottom color in what you want

Chris Sweeney pro premium answered 8 years ago

I'm trying to change the colour of the text you enter when searching in the md navbar; currently it's black and I would like white. I've tried the code above without success. I don't want to change the colour of the search text in the slideout sidenav. Thanks Chris

Marta Szymanska staff pro premium answered 8 years ago

Hi Chris, could you paste here your code in which you want to change input color? Best, Marta

Chris Sweeney pro premium answered 8 years ago

Thanks Marta Sorry for the delay in replying - I hadn't ticked the 'notify me' box! 
<li class="nav-item hidden-sm-down">
                    <a href="../clublogin.php" class="nav-link"><i class="fa fa-sign-in" title="members login"></i> Members</a>
                </li>
            </ul>
            
<form class="navbar-form hidden-sm-down" method="post" action="pages_results.php?ClubID=<?php echo($rsMenu->getColumnVal("ClubID")); ?>">
                   <input type="text" placeholder="Search" name="fmSearch" id="fmSearch"> <input name="ClubID" type="hidden" id="ClubID" value="<?php echo($rsMenu->getColumnVal("ClubID")); ?>"></form>
Cheers Chris

Marta Szymanska staff pro premium answered 8 years ago

Hi, Try this CSS code: 
.form-control {
    color: #fff;
}

.form-control:focus {
    color: #fff;
}
Best, Marta

Chris Sweeney pro premium answered 8 years ago

Hi Marta No difference, unfortunately. http://www.rotary-ribi.org/clubs/homepageV4.php?ClubID=1103 Cheers Chris

Chris Sweeney pro premium answered 8 years ago

Hi Marta Done using #fmSearch {color: #ffffff!important;} Cgeers Chris

Marta Szymanska staff pro premium answered 7 years ago

Hi, ok, so now it's fine? Best, Marta

Chris Sweeney pro premium answered 7 years ago

Hi Marta Yes, it shows white now, against the blue background it's much better than black! Thanks for making me think and pointing me in the right direction. Cheers Chris

ABELARDOLG pro answered 6 years ago

Hi, How could I set the color of the "placeholder" text at input items?

Thanks in advance!

Brs.

Bartłomiej Malanowski staff pro premium commented 6 years ago

Just use the ::placeholder pseudo-element as described here: https://developer.mozilla.org/en-US/docs/Web/CSS/::placeholder
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
About author
Nikola Zoric
Pro User
0Support score
1Questions 0Answers
0Snippets likes 0Snippets