Select list text position changes on clicking anywhere on the page or browser resize

Question

I have a select input field on my page. When I reload the page, the text "Player" is aligned like I wanted. But as soon as I click anything on the page or resize the browser window, the text slides down a little bit. How can I fix this?

SEE IMAGE

I am using the W3.CSS framework and some custom css. To get the css attributes I used inspect and right clicked the element to copy the styles.

-webkit-text-size-adjust: 100%;
box-sizing: inherit;
font: inherit;
margin: 0;
text-transform: none;
border-right: 1px solid #ccc!important;
color: #000 !important;
background-color: #f5f7f8 !important;
padding: 8px 16px;
float: left;
border: none;
display: block;
outline: 0;
height: 30px;
width: 120px;
border-radius: 5px 0px 0px 5px;

This is the select input

<select class="w3-select w3-bar-item w3-theme-l5 w3-border-right" name="search_kind" style="height: 30px; width:120px; border-radius: 5px 0px 0px 5px;">
  <option value="1" selected="">Player</option>
  <option value="2">Alliance</option>
</select>

Answer 1

Don't specify the height in <select> .Rest is fine You can see my code below

 <html> <title>W3.CSS</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <body> <select class="w3-select w3-bar-item w3-theme-l5 w3-border-right" name="search_kind" style=" width:120px; border-radius: 5px 0px 0px 5px;"> <option value="1" selected="">Player</option> <option value="2">Alliance</option> </select> </body> </html>

Select list text position changes on clicking anywhere on the page or browser resize

Question

1 answers

solution1
0 2023-01-13 13:16:14

Select list text position changes on clicking anywhere on the page or browser resize

Question

1 answers

solution1 0 2023-01-13 13:16:14

solution1
0 2023-01-13 13:16:14