0

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>
Akshay
  • 926
  • 9
  • 21
Tanktier
  • 3
  • 2

1 Answers1

0

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>
ac_mmi
  • 2,302
  • 1
  • 5
  • 14