In the html code, I have an input field that looks like this:
https://i.sstatic.net/DsD4y.png
This is the CSS for the input fields:
.form-control-1 {
display: block;
margin: 0 auto;
width: 30%;
height: 50px;
padding: 6px 12px;
font-size: 18px;
line-height: 1.42857143;
color: #555;
background-color: transparent;
background-image: none;
border-color: transparent;
border: 0px solid black;
border-bottom: 1px solid black;
transition: width 1s;
outline: none;
}
For mobile viewport (<768px), there is a CSS rule that overrides some of the above rules:
.m-form-control-1 {
width: 100% !important;
line-height: 0 !important;
padding: 0 !important;
}
I am facing an issue where I cannot eliminate the space between the placeholder "Username" and the bottom border of the input field by using line-height:0 and padding:0.
I also attempted to use a negative value for the bottom margin such as margin-bottom:-5%, but it did not resolve the issue.
Is there a way to get rid of this unwanted space?
Note: This problem only occurs in the mobile view (<768px).
Link to JS Fiddle: https://jsfiddle.net/quwswery/