Chrome introduces surprise spacing to text input fields styled uniquely

Question

Chrome introduces surprise spacing to text input fields styled uniquely

This particular code snippet is functioning correctly on Firefox, but unfortunately not on Chrome. The height of the input should match the styling of the select, but there seems to be a discrepancy in Chrome. Any ideas on how to rectify this?

Upon closer examination, it appears that the overflow property may be playing a role in the issue, although the exact reason is unknown.

@import url(https://fonts.googleapis.com/css?family=Open+Sans);
.my-custom-forms {
    font-family: 'Open Sans',serif;
}
select.my-custom-forms, input.my-custom-forms{
    border-top: none;
    border-left: none;
    border-right: none;
    border-radius: 0;
    border-bottom: 2px solid lightblue;
    padding: .25rem .1rem .25rem .1rem;
    overflow: auto;
    width: 100%;
    background-color: transparent;
    transition: border .5s ease;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container m-3">
  <div class="row">
    <div class="col-3">
      <select class="my-custom-forms">
        <option>Option</option>
      </select>
    </div>
    <div class="col-3">
      <select class="my-custom-forms">
        <option>Option</option>
      </select>
    </div>
    <div class="col-6">
      <input placeholder="text" class="my-custom-forms">
    </div>
  </div>
</div>

I am utilizing Bootstrap as a base framework, but I'm uncertain if it's contributing to the root cause of the problem.

html twitter-bootstrap css bootstrap-4

Answer 1

Answer №1

An issue arises from the overflow: visible !important style set for the <select> elements in the user agent stylesheet. This rule cannot be overridden using CSS or inline styles directly on the <select> element itself.

The following CSS rule is always active:

select:not(:-internal-list-box) {
    overflow: visible !important;
}

If you apply the same 'visible' overflow to the .my-custom-forms class, all form controls will have consistent heights.

To address this, you can utilize the following solution (with your existing code):

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

.my-custom-forms {
  font-family: 'Open Sans',serif;
}

select.my-custom-forms, input.my-custom-forms {
  background-color: transparent;
  border: none;
  border-bottom: 2px solid lightblue;
  border-radius: 0;
  overflow: visible;
  padding: 0.25rem 0.1rem;
  transition: border 0.5s ease;
  width: 100%;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container m-3">
  <div class="row">
    <div class="col-3">
      <select class="my-custom-forms">
        <option>Option</option>
      </select>
    </div>
    <div class="col-3">
      <select class="my-custom-forms">
        <option>Option</option>
      </select>
    </div>
    <div class="col-6">
      <input placeholder="text" class="my-custom-forms">
    </div>
  </div>
</div>

I would also recommend utilizing the .form-row and .form-control classes on corresponding elements. By adjusting the CSS rule

select.form-control:not([size]):not([multiple])

, you can prevent the height of the <select> elements from being calculated based on specified padding:

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

.my-custom-forms {
  font-family: 'Open Sans',serif;
}

select.form-control.my-custom-forms:not([size]):not([multiple]) {
  height: auto !important;
}

select.my-custom-forms, input.my-custom-forms {
  background-color: transparent;
  border: none;
  border-bottom: 2px solid lightblue;
  border-radius: 0;
  overflow: visible;
  padding: 0.25rem 0.1rem;
  transition: border 0.5s ease;
  width: 100%;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container m-3">
  <div class="form-row">
    <div class="col-3">
      <select class="form-control my-custom-forms">
        <option>Option</option>
      </select>
    </div>
    <div class="col-3">
      <select class="form-control my-custom-forms">
        <option>Option</option>
      </select>
    </div>
    <div class="col-6">
      <input class="form-control my-custom-forms" placeholder="text" type="text">
    </div>
  </div>
</div>

Answer 2

An issue arises from the overflow: visible !important style set for the <select> elements in the user agent stylesheet. This rule cannot be overridden using CSS or inline styles directly on the <select> element itself.

The following CSS rule is always active:

select:not(:-internal-list-box) {
    overflow: visible !important;
}

If you apply the same 'visible' overflow to the .my-custom-forms class, all form controls will have consistent heights.

To address this, you can utilize the following solution (with your existing code):

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

.my-custom-forms {
  font-family: 'Open Sans',serif;
}

select.my-custom-forms, input.my-custom-forms {
  background-color: transparent;
  border: none;
  border-bottom: 2px solid lightblue;
  border-radius: 0;
  overflow: visible;
  padding: 0.25rem 0.1rem;
  transition: border 0.5s ease;
  width: 100%;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container m-3">
  <div class="row">
    <div class="col-3">
      <select class="my-custom-forms">
        <option>Option</option>
      </select>
    </div>
    <div class="col-3">
      <select class="my-custom-forms">
        <option>Option</option>
      </select>
    </div>
    <div class="col-6">
      <input placeholder="text" class="my-custom-forms">
    </div>
  </div>
</div>

I would also recommend utilizing the .form-row and .form-control classes on corresponding elements. By adjusting the CSS rule

select.form-control:not([size]):not([multiple])

, you can prevent the height of the <select> elements from being calculated based on specified padding:

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

.my-custom-forms {
  font-family: 'Open Sans',serif;
}

select.form-control.my-custom-forms:not([size]):not([multiple]) {
  height: auto !important;
}

select.my-custom-forms, input.my-custom-forms {
  background-color: transparent;
  border: none;
  border-bottom: 2px solid lightblue;
  border-radius: 0;
  overflow: visible;
  padding: 0.25rem 0.1rem;
  transition: border 0.5s ease;
  width: 100%;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container m-3">
  <div class="form-row">
    <div class="col-3">
      <select class="form-control my-custom-forms">
        <option>Option</option>
      </select>
    </div>
    <div class="col-3">
      <select class="form-control my-custom-forms">
        <option>Option</option>
      </select>
    </div>
    <div class="col-6">
      <input class="form-control my-custom-forms" placeholder="text" type="text">
    </div>
  </div>
</div>

Answer 3

Answer №2

Isolate them.

select.my-unique-design {
    border-top: none;
    border-left: none;
    border-right: none;
    border-radius: 0;
    border-bottom: 2px solid lightblue;
    padding: .25rem .1rem .25rem .1rem;
    overflow: auto;
    width: 100%;
    background-color: transparent;
    transition: border .5s ease;
}

input.my-unique-design {
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 2px solid lightblue;
    padding: .25rem .1rem .25rem .1rem;
}

Answer 4

Isolate them.

select.my-unique-design {
    border-top: none;
    border-left: none;
    border-right: none;
    border-radius: 0;
    border-bottom: 2px solid lightblue;
    padding: .25rem .1rem .25rem .1rem;
    overflow: auto;
    width: 100%;
    background-color: transparent;
    transition: border .5s ease;
}

input.my-unique-design {
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 2px solid lightblue;
    padding: .25rem .1rem .25rem .1rem;
}

Answer 5

Answer №3

Trying to override the default styles set by user agents and achieve a consistent look across different browsers can be quite challenging. Thankfully, if you are utilizing Bootstrap 4, much of this hard work has already been taken care of for you; all you need to do is make use of their predefined styles.

One such class that you can leverage is form-control, which automatically applies the necessary styles (you can confirm this by inspecting the elements):

select.form-control:not([size]):not([multiple]) {
    height: calc(2.25rem + 2px);
}
.form-control {
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

To override the default user-agent styles in Chrome and Firefox, simply use the form-control class as shown in the snippet below:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container m-3">
  <div class="row">
    <div class="col-3">
      <select class="form-control">
        <option>Option</option>
      </select>
    </div>
    <div class="col-3">
      <select class="form-control">
        <option>Option</option>
      </select>
    </div>
    <div class="col-6">
      <input placeholder="text" class="form-control">
    </div>
  </div>
</div>

Answer 6

Trying to override the default styles set by user agents and achieve a consistent look across different browsers can be quite challenging. Thankfully, if you are utilizing Bootstrap 4, much of this hard work has already been taken care of for you; all you need to do is make use of their predefined styles.

One such class that you can leverage is form-control, which automatically applies the necessary styles (you can confirm this by inspecting the elements):

select.form-control:not([size]):not([multiple]) {
    height: calc(2.25rem + 2px);
}
.form-control {
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

To override the default user-agent styles in Chrome and Firefox, simply use the form-control class as shown in the snippet below:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container m-3">
  <div class="row">
    <div class="col-3">
      <select class="form-control">
        <option>Option</option>
      </select>
    </div>
    <div class="col-3">
      <select class="form-control">
        <option>Option</option>
      </select>
    </div>
    <div class="col-6">
      <input placeholder="text" class="form-control">
    </div>
  </div>
</div>

Chrome introduces surprise spacing to text input fields styled uniquely

Answer №1

Answer №2

Answer №3

Similar questions

Aligning the image at the center within a flex container

What is the best way to conceal a menu that automatically scrolls to the content when it is clicked?

Having trouble with the contact form sending emails

Ways to remove the line under a logo in HTML using CSS and Bootstrap

PHP - display the modified page with the updates applied

Is there a way to bring to life the addClass() and removeClass() jQuery functions through animation?

coding with javascript and css

Is there a way for me to retrieve the widths of all child elements within an HTML document?

Customizing content based on Route - Utilizing Node.js/React

Achieving auto-height for two elements with CSS within a single block

issues with padding in the main content section

Inspecting JavaScript for any attachments

Prevent cross-site scripting vulnerabilities by replacing the characters "'<'" and "'>'"

Styling the body element in Material UI: A guide to customizing the

PHP Random Background Image Selector

Breaking down a string and then retrieving elements from an array

Why is the image cut in half on mobile devices but displaying correctly on computer screens? Could it be an issue with

Arranging elements and buttons inside of components to create a cohesive design

How can I detect a change in user input using jQuery?

I'd like to eliminate everything following the .com