Topic: Input styles are not all the same for text or number

giorgio.ponza priority asked 5 years ago


I used the grey-skin and added 2 inputs, one of type 'text' and the other of type 'number'.
When i focus on these inputs, the blue color of the bottom border are not the same.
Looking in the file mdb.css, i noticed that the default color is #4285f4 (border-bottom: 1px solid #4285f4;), but this color is overwritten with a more specific rule

.grey-skin input[type="email"]:focus:not([readonly]),
.grey-skin input[type="text"]:focus:not([readonly]),
.grey-skin input[type="password"]:focus:not([readonly]),
.grey-skin textarea.md-textarea:focus:not([readonly]) {
  border-color: #75c1f0;
So for inputs of type email|text|password, the border is #75C1F0, for the others is #4285F4.
I would expect all border have the same color :D

You can verify the issue with the following code (taken from your site)

<!-- Medium input -->
<div class="md-form">
<input type="text" id="inputMDEx1" class="form-control">
<label for="inputMDEx1">Medium input</label>
</div>
<!-- Medium input -->
<div class="md-form">
<input type="number" id="inputMDEx2" class="form-control">
<label for="inputMDEx2">Medium input</label>
</div>

Marta Wierzbicka staff answered 5 years ago


Hi, we will fix this in our sass in another release, but for now, you can use this code to fix this by yourself:
.grey-skin input[type="number"]:focus:not([readonly]) {
  border-color: #75c1f0;
  box-shadow: 0 1px 0 0 #75c1f0; }
.grey-skin input[type="number"]:focus:not([readonly]) + label {
  color: #75c1f0; }
Best, Marta

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

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags