Increase the border size of the select element in Bootstrap 4 to more than 1 pixel

I am in the process of transitioning a codebase from Bootstrap 3 to Bootstrap 4.

In our custom CSS, we have applied a unique border-width to the .form-control class.

Let's say, for example, that the border-width is set to 4px for demonstration purposes.

.form-control {
    border-width: 4px;
}

Due to this customization, the input and select fields end up with different "heights."

To see an illustration of this issue, take a look at this Codepen (tested on the latest version of Firefox):

https://codepen.io/anon/pen/ZRprmG

How can I adjust the styling of select form controls so that they have the same border size and height as the input fields? Edit: Bonus What might be causing this discrepancy?

htmlcssbootstrap-4

Answer №1

It slipped my mind to mention that our project utilizes the SASS Bootstrap Build. After reading @Maharkus' insightful comment, I realized that the SASS build "determines" the height by referencing $input-border-width. Setting this variable to 2px resolved the issue perfectly.

// custom.scss
$input-border-width: 2px !default;

Answer №2

Include the below snippet in your CSS:

#inputState {

  height: 2.75em;

}

Answer №4

.input-field, .select-field {
   minimum-height: 46px ;
 }

Answer №5

To incorporate this CSS into your design, follow the steps below --

#inputState{
height: 44px;

}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Folding into itself lies another folding

While attempting to nest a collapse area inside another collapse, I encountered an issue. Upon clicking to open the first collapse, it functions perfectly. However, when trying to open the second collapse (nested within the first one), it inadvertently cl ...

htmlbootstrap-4

Navigating with React Router and a Navbar

Hey there, new to React and currently working on setting up routing on my home page. The links are currently located within my navbar component, but I am thinking that I need to configure the router in App.js instead. I have Contact, Social, and Hobbies ...

htmlcssreactjsreact-router

The proper way of aligning text in the middle of a button

I'm currently working on designing a CSS button that will be placed in the top left corner and serve as a back button to the previous page. However, I am facing challenges when it comes to centering the arrow or text perfectly in the middle of the but ...

htmlcss

Utilizing CSS to Properly Position HTML Elements

Check out my code on jsFiddle I'm facing some challenges in positioning HTML elements using CSS. While I grasp the fundamental concepts of block and inline elements, implementing them in real coding scenarios can be confusing. I've shared my HTM ...

htmlcss

Hide the footer DIV in CSS by making it disappear with a height of 100%

I'm currently facing an issue with my CSS layout. Despite managing the problem in IE and seeing everything work well, the footer container has mysteriously disappeared! I've attempted to recode the CSS without success, even after trying for days ...

csslayoutheight

Transform your standard HTML buttons into a collective of radio buttons

Looking for a way to make some ordinary buttons function as radio buttons without adding another library to the project. Any suggestions on how this can be achieved using just HTML and JavaScript/jQuery? Appreciate any help, thank you. ...

javascriptjqueryhtml

Assistance required for JavaScript with Image and Hyperlinks

In the provided code snippet, I have included a javascript onclick function to the image tag. After clicking the image and then going back, the page remains on the current page rather than returning to the original page. Is there a way to prevent this beha ...

javascripthtmlcss

Linking multiple font files of the identical typeface to their respective CSS styles

I recently purchased the Didot font from myfonts.com, which includes different styles such as regular, bold, italics, and bold italics (each in separate files). While using WordPress, I noticed that when my users write articles with bold and italic text, ...

cssfonts

What sets apart the intended usage of the DOM `hidden` from the CSS `visibility` property?

Exploring the DOM property hidden and the CSS property visibility, I find myself unsure of when to utilize each one. What are the distinctions in their intended purposes? While they may serve similar functions, I am curious about the underlying motivation ...

csshtml

Create an input field dynamically by utilizing the append method in jQuery

Concern: As part of an edit page, I am working on appending an input field from a modal window to an existing panel while retaining the format of the rest of the fields. The user is currently able to create and add the new field using the code provided in ...

javascriptjqueryhtml

Are HTML entities ineffective in innerHTML in javascript?

Take this example: <script type="text/javascript> function showText() { var text = document.getElementById("text-input").value; document.getElementById("display").innerHTML = text; } </script> <?php $text = "<html>some ...

javascripthtml

Creating a mouse hover effect for irregular shapes on an image map

Is it possible to implement a mouse hover effect on irregular shapes within an image map? These irregular shapes are not basic polygons like rectangles, triangles, or circles, but rather complex designs such as lanterns or animals. Can this be achieved? ...

htmlcss

Issue with grid breakpoints for medium-sized columns and grid rows not functioning as expected

I'm working on building a grid layout from scratch in Vue.js and have created my own component for it. In my gridCol.vue component, I have defined several props that are passed in App.vue. I'm struggling to set up breakpoints for different screen ...

javascripthtmlvue.jsgridvuetify.js

The first-child and last-child selectors are not working properly in the CSS

In the family of elements, the first child should proudly show off the image icon for home while the last child remains humble without any background imagery: Check out the evidence here: http://jsfiddle.net/gUqC2/ The issue at hand is that the first chi ...

css

What is the best way to manage the delay that occurs when using the append() function?

I'm using jQuery to append an array to a div and I want to display a loading indicator while this process is happening. I added a callback function to my append logic, which works fine. However, the loader disappears before the array is fully rendered ...

javascriptjqueryhtmlcssarrays

Navigate to the top of the page using jQuery

Attempting to implement a simple "scroll jump to target" functionality. I've managed to set it up for all parts except the "scroll to top". The jumping works based on the tag's id, so it navigates well everywhere else, but not to the very top. He ...

javascriptjqueryhtmlcss

Protection of HTML Contact Forms

I'm attempting to send an email using an HTML contact form. Here is the HTML code I've created: <form id="contact_form" action="sendMail.php" method="post"> <input id="firstname" name="firstname" type="text" placeholder="First ...

phpjqueryhtmlajaxemail

Expanding Bootstrap 5 navbar-nav to occupy entire screen space in collapsed state

Hello everyone, I hope you are doing well! I am currently working on a website project using Bootstrap 5 and have encountered an issue with the navbar toggler. While the toggler is functioning properly, I am having trouble making it fill the full width o ...

javascripthtmlcssnavbarbootstrap-5

What is the best way to create a fixed contact form on specific pages?

There is a Contact Form 7 on the webpage that I want to make fixed to the right side. Initially, the form is hidden and only the form button (open) is visible. When clicked, the form should open. ...

jquerycss

Tips for invoking a function to automatically load elements on a jQuery mobile website

I am looking to keep my navbar HTML markup in a centralized location for easy editing. Currently, the body content of my index.html file appears like this: <div data-role="page" id="SomePage"> <div data-role="header"> <h1>Thi ...

javascriptjqueryhtmlcssjquery-mobile