Topic: Input styles are not all the same for text or number
giorgio.ponza priority asked 6 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>
Add comment
Marta Wierzbicka staff answered 6 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
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