CODEWITHSUNDEEP
htmlcss
Ernest Soo
Ernest Soo

Reputation: 194

Remove unwanted space in input field below text

I have an input field like this in my html:

HTML Input field

CSS for 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;
}

CSS that overrides some of the CSS rules defined above in mobile viewport ( < 768px):

.m-form-control-1 {
  width: 100% !important;
  line-height: 0 !important;
  padding: 0 !important;
}

The problem I am having now is I cant seem to remove the space between the placeholder "Username" and the input field's border-bottom with line-height:0 and padding:0.

I also tried having negative value for the bottom margin. Eg. margin-bottom:-5% but it still does not work?

How can I remove the unwanted space?

Note: I only have this problem in mobile view. (<768px)

JS Fiddle: https://jsfiddle.net/quwswery/

Upvotes: 0

Views: 1951

Answers (1)

Abhishek Pandey
Abhishek Pandey

Reputation: 13558

Set height:auto to form-control-1 or you can remove height either.

.m-form-control-1 {
  width: 100% !important;
  line-height: 0 !important;
  padding: 0 !important;
  margin-bottom: -5% !important;
}

.form-control-1 {
  display: block;
  margin: 0 auto;
  width: 30%;
  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;
}
<input autocomplete="off" type="text" class="m-form-control-1 form-control-1" id="username" name="username" data-ng-model="username" data-ng-minlength="8" data-ng-maxlength="20" data-ng-pattern="[0-9a-zA-Z]+" required data-ng-focus="disableUsernameWarning()"
  data-ng-blur="enableUsernameWarning()" data-ng-required placeholder="Username" />

Upvotes: 2

Related Questions