Change width of select element for each active option - html

Question

I have a select element that lays directly up against an input. It looks great for the most part, but there's too much whitespace on some of the options. It seems like unless I set some static width myself, select expands to the width of its largest option.
I want to make it so that the select option only takes up as much width as the currently displayed option. I'd ask if it's possible, but I know it is somehow because I've seen it on Amazon's homepage on their search bar. The behavior of the select that controls their search filter is essentially what I'm trying to recreate on my website, but I can't figure out exactly what they did. Here's the code that reproduces the basic idea of what I've got currently.
HTML:
<select>
<option>All</option>
<option>Consoles</option>
<option>Games</option>
<option>Equipment</option>
</select>
<input type="text" />
CSS:
select {
-moz-appearance: none;
-webkit-appearance: none;
background-color: #f8f8f8;
border: 1px solid #ccc;
border-radius: 4px 0 0 4px;
border-right: 0;
box-sizing: border-box;
height: 44px;
padding: 10px;
text-align: center;
float: left;
}
input[type='text'] {
height: 44px;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 0 4px 4px 0;
margin: 0;
padding: 0 5px;
font-size: 14px;
min-width: 300px;
}
I have a fiddle with everything here as well.
I know I could use JavaScript to make it work, but that would be an absolute last resort in my mind. I want to do it in pure HTML and CSS if I can. Any help is greatly appreciated.

Answer 1

Hope this is the thing that you want exactly. But since the <select> width need to be calculated or determined with another value, it is required some JavaScripts. I used pure jQuery and did some changes to your HTML and CSS.
The answer to your problem is, you need to append your selected option to another select option to get the current option width and keep it until the next change of the select.
HTML:
<div id="main-div">
<select id="resized">
<option value="All">All</option>
<option value="Consoles">Consoles</option>
<option value="Games">Games</option>
<option value="Equipment">Equipment</option>
</select>
<input type="text" />
</div>
<!-- hidden select to calculate the selected option width -->
<select id="hidden_select">
<option id="hidden_select_option"></option>
</select>
CSS:
select {
-moz-appearance: none;
-webkit-appearance: none;
background-color: #f8f8f8;
border: 1px solid #ccc;
border-radius: 4px 0 0 4px;
border-right: 0;
box-sizing: border-box;
height: 44px;
padding: 10px;
text-align: center;
float: left;
}
input {
height: 44px;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 0 4px 4px 0;
margin: 0;
padding: 0 5px;
font-size: 14px;
}
#main-div{
display: none;
width: 375px;
}
#hidden_select {
display: none;
}
jQuery:
$(document).ready(function() {
$('#resized').change();
$("#main-div").css("display", "block");
});
$('#resized').on("change", function(){
$("#hidden_select_option").html($("#resized option:selected").text());
$(this).width($("#hidden_select").width());
//fix the input filed width
var x = $("#main-div").width();
var y = $(this).width() + 21;
$("input").width((x-y) - 12);
});
Note: values 21 and 12 are your padding values and border values of select and input.
Working Code:
https://jsfiddle.net/y82x60fa/10/

Answer 2

Here is the solution with simple jquery. On Amazon's home page is also done with js or other scripting language.
$('#resizingSelectTag').change(function(){
$("#widthTempOption").html($('#resizingSelectTag option:selected').text());
$(this).width($("#selectTagWidth").width());
});
#resizingSelectTag {
width: 50px;
}
#selectTagWidth{
display : none;
}
select {
-moz-appearance: none;
-webkit-appearance: none;
background-color: #f8f8f8;
border: 1px solid #ccc;
border-radius: 4px 0 0 4px;
border-right: 0;
box-sizing: border-box;
height: 44px;
padding: 10px;
text-align: center;
float: left;
position:absolute;
border-right: 1px solid #ccc;
}
input[type='text'] {
height: 44px;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 0 4px 4px 0;
margin: 0;
padding: 0 5px;
font-size: 14px;
min-width: 300px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="resizingSelectTag">
<option>All</option>
<option>Lorem Ipsum</option>
<option>Lorem Ipsum is</option>
</select>
<select id="selectTagWidth">
<option id="widthTempOption"></option>
</select>
<input type="text" />