Why does the width/height of an input and a select appear differently on every browser I've tested?

I am puzzled by the fact that, despite resetting their properties, the width and height of both the input and select boxes are different (you can see for yourself on this fiddle):

HTML

<div class="myDiv">
    <input class="myInput" />

    <select class="mySelect">
        <option value="">Some</option>
    </select>
    
    <br />
    <br />
    
    <select class="mySelect">
        <option value="">Some</option>
    </select>    
</div>​

CSS

​.myDiv
{
    padding:30px;
}

.myInput
{
    border: 1px solid #000000; 
    width: 252px;
    margin:0;
    padding:0;
    height:20px;
}

.mySelect
{
    border: 1px solid #000000; 
    width: 252px;
    margin:0;
    padding:0; 
    height:20px;    
}
​

Why is this happening? What other properties do I need to reset?

I understand that some properties are difficult to define, like border color or select button style, but shouldn't the size be consistent at least...

Answer №1

The issue at hand is related to the box model. When setting width and height on various elements, the interpretation may vary. To address this, one must specify the box-sizing property on said elements. However, since this property is still experimental, it is necessary to include browser-specific prefixes to ensure compatibility across all platforms.

box-sizing: border-box;
-ms-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;

In cases where precise alignment is imperative, especially on older browsers like IE7 that do not support the aforementioned method, JavaScript can be utilized to adjust sizes accordingly. The provided script utilizes a SELECT element as a reference for fixed height on IE7, enabling the adjustment of INPUT elements to match. Additional logic may be required to determine which elements should undergo this resizing process.

<script type="text/javascript>
    var select = document.getElementsByTagName('select')[0];
    var width = select.offsetWidth;
    var height = select.offsetHeight;
    var inputs = document.getElementsByTagName('input');
    for (var i = 0; i < inputs.length; i++) {
        inputs[i].style.width = width + 'px';
        inputs[i].style.height = height + 'px';
        inputs[i].style.width = (2 * width - inputs[i].offsetWidth) + 'px';
        inputs[i].style.height = (2 * height - inputs[i].offsetHeight) + 'px';
    }
</script>

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

Angular - CSS Grid - Positioning columns based on their index values

My goal is to create a CSS grid with 4 columns and infinite rows. Specifically, I want the text-align property on the first column to be 'start', the middle two columns to be 'center', and the last column to be 'end'. The cont ...

How can I connect a database to an HTML website on a local server (XAMPP)?

For my university project, I've developed a website that now requires the addition of a database. I'm looking to figure out how to integrate a database using XAMPP for the website. ...

Within jQuery lies the power to perform multiplication operations effortlessly

I'd like to accomplish this using jQuery: var menuItems = document.getElementsByTagName("li"); for (var k = 0; k < menuItems.length; k++) { if (menuItems[k].className == "menu") { var child = menuItems[k].firstChild; if ...

Implement a captivating hover effect on every single element within a particular class

I created a basic website with the following design: However, there is an issue with the hover effect. It only works on the specific area where the mouse pointer is located (here ipsum). My intention was for the hover effect to work on all elements. To fi ...

Dealing with CSS Overflow Issues: Fixing the Scroll Bug

My current project involves creating a page with fixed links at the top and submit buttons at the bottom. The content in the middle is scrollable using overflow:auto. I've noticed that when I resize the browser window, the scrollbar slowly disappears ...

Revamping repetitive JavaScript code for the pagination of Instagram Stories

I'm currently developing a website that utilizes fullpage.js and includes a section with multiple slides. These slides automatically transition every 10 seconds. I wanted to implement progress bars similar to those on Instagram, where each bar fills ...

What is the best way to grasp the concepts behind MaterialUI styled components?

Can someone please help me understand how to apply styles to a component using MaterialUI? I've been reading the documentation but it's all very confusing to me. What exactly are classes and how do I connect the const style to the BeerList compon ...

Ways to show error messages from a JSON reply within a DIV element

I am currently working on an AJAX form that allows users to change their passwords. My goal is to display all validation errors within an HTML DIV element. Although the form submission functionality is working well, I am facing an issue with passing the e ...

Only the initial external CSS ID is functional, while the second one is inactive

I am facing an issue with my table where I have applied an external CSS that uses alternating shaded rows. My aim is to have specific table cells with different background and font colors - one cell with a green background and red font, and another with a ...

I'm having trouble getting jQuery to work properly with Bootstrap buttons

In simple terms, my objective is to have two buttons on a page where "1" is displayed when the first button is pressed and "2" is displayed when the second button is pressed. This functionality works fine with radio inputs, but when I incorporate button la ...

When clicking on Wordpress pagination links, they change to an "active" state without redirecting the page

I have spent a lot of time searching for solutions to pagination issues, but I haven't found a fix for the specific problem I'm facing. While pagination seems to be working correctly in terms of generating links and pages, the navigation links d ...

Issue with Inline forms in Ruby on Rails/HTML: The 'checked' attribute with the value of 'false' is

Desired Setting: I am trying to set the default option for this form to be "No" (or false), however, when I set it as such, my application loads with no option selected. When I use :check => true, the default option selected becomes "Yes" (or true). I ...

Programmatically setting focus in Ionic

In my Ionic and Angular component, I am attempting to programmatically set focus after the page has loaded. Here is the code: item.component.html: <ion-row> <ion-col col-5> <ion-item > <ion-label&g ...

Utilizing Flexbox for Creating Horizontally Aligned Boxes with CSS

My goal is to arrange the explanation and participation sections as flexboxes, positioned side by side. Below them, I want the benefits and requirements sections stacked on top of each other. I have attempted to use flex-direction:row; for the explanation ...

Encountering a TypeError with DataTables and Tabledit

I've been attempting to integrate DataTables with Tabledit, but I keep encountering the error message "TypeError: Cannot set properties of undefined (setting 'nTf')". The number of tags also matches up. Interestingly, if I comment out the " ...

The ease of use and availability of radio buttons

When clicking on the first or second value of the radio button, it selects the first option. Here is the HTML code: @supports(-webkit-appearance: none) or (-moz-appearance: none) { input[type='radio'], input[type='checkbox'] { ...

Adjust the size of items using a background image that covers the element

I'm struggling with a seemingly simple task here. I've been experimenting with different methods, but I just can't seem to grasp it. On the front page of my website, there is a cover section that contains a logo and a button: <section i ...

Making jquery's one() function work effectively with duplicated classes

Take a look at the following HTML code snippet: <div class="options-selecter"> <span class="item-option" data-value="8">XYZ</span> <span class="item-option" data-value="11">LMN</span> <span class="item-option a ...

The rendering of the input dropdown control in Angular JS is experiencing difficulties

I am currently using your Angular JS Input Dropdown control, and I have followed the code example provided on your demo page in order to implement the control on a specific page of my website built with PHP Laravel. However, I have encountered an issue dur ...

Is there a way to ensure that my background color extends across the entire webpage background?

I'm curious about how to make sure that the background color of sections 1 and 2 fills the entire webpage, similar to this example. Currently, the background color only covers half of the webpage, but I want it to extend across the entire background o ...