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?
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>
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>