JSFiddle - React, Tailwind, and code Playground

by Timmy Willison

HTML

<select name='test'>
    <option>test 1</option>
    <option>test 2</option>    
</select>
<br/>
<input type='text' />
<br/>
<div></div>

CSS

input, select {
    width: 100px;
    padding: 5px;
    border: 1px solid black;
    -webkit-appearance: none;
    -moz-appearance: none;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

JavaScript

var width = 0, csswidth = 0;

$('div').append('Checking selectbox...<br/>');
width = $('select').width();
csswidth = $('select').css('width');
$('div').append('Reported width = ' + width + '<br/>');
$('div').append('Reported CSS width = ' + csswidth + '<br/>');
$('div').append('Subtracting 10 and setting width again...<br/>');
width -= 10;
$('select').width(width);
width = $('select').width();
csswidth = $('select').css('width');
$('div').append('Reported width = ' + width + '<br/>');
$('div').append('Reported CSS width = ' + csswidth + '<br/>');
$('div').append('<br/>');

$('div').append('Checking input...<br/>');
width = $('input').width();
csswidth = $('input').css('width');
$('div').append('Reported width = ' + width + '<br/>');
$('div').append('Reported CSS width = ' + csswidth + '<br/>');
$('div').append('Subtracting 10 and setting width again...<br/>');
width -= 10;
$('input').width(width);
width = $('input').width();
csswidth = $('input').css('width');
$('div').append('Reported width = ' + width + '<br/>');
$('div').append('Reported CSS width = ' + csswidth + '<br/>');