The appearance of a select box in HTML can vary between different computers and browsers. For example, on one computer using Google Chrome, the select box may look like this:
https://i.stack.imgur.com/g2Xnn.png
However, on my computer with Google Chrome, it appears differently:
https://i.stack.imgur.com/mXDb4.png
I have already tried clearing my browsing history in Chrome, but the issue persists. Interestingly, when I use Microsoft Edge on my computer, the select box displays correctly as shown in the first image. How can I ensure that the select box looks consistent across all browsers on my computer?
Below is the CSS code for the select box:
.select2-container {
display: block;
max-width: 100% !important;
width: auto !important;
}
.select2-container .select2-selection--single {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
align-items: center;
background-color: transparent;
border: none;
height: 48px;
outline: none;
position: relative;
}