I am new to using Jquery. I am attempting to create a submit form with a select option in it. However, the drop-down options are not displaying correctly. They appear slightly above and to the left of where they should be.https://i.sstatic.net/xZecM.png
I would like these options to be positioned just below the "select" object.
Below is my Code:
body {
background: #333;
}
select,
option {
background: rgba(255, 255, 255, 0.4) no-repeat scroll 16px 16px;
width: 276px;
height: 48px;
font-family: 'Source Sans Pro', sans-serif;
font-size: 18px;
color: #fff;
padding-left: 45px;
padding-top: 12px;
margin-bottom: 20px;
overflow: hidden;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}<body id="gradient" style="height:90vh">
<div id='title'class="container" style="border-style:solid;border-width:2px;border-color:#ffffff;height:23vh;width:45vw;margin: 0 auto;margin-top:150px;">
<h1 style="color:#ffffff;font-size: 250%;font-weight: 400;margin-top:60px" align="middle">VATek Web Configuration</h1>
</div>
<form name="broadcastform" id="broadcastform" method="post" action="">
<h1 id="broadcast_title" style="color:rgba(255,255,255,0.7);font-size: 250%;font-weight: 400;margin-top:-10px" align="middle">BROADCAST</h1>
<hr style="border-color:#ffffff;weight:40%;margin:0 auto;margin-bottom:20px">
<center class="page_intro">
<div style="margin-top:-1%;color:rgba(255,255,255,0.7);width:90%;margin-bottom:6.5%" class="page_
intro">
<font size="6" style="line-height: 150%"class="page_intro"><center>Welcome!</center></font>
<font size="5" style=" padding-top:20px;line-height: 150%;font-weight:normal;opacity:0.7"class="page_intro"><center>This is a Tool to Configure and Broadcast Your Modulator. Please Follow the Steps and Fill in the Parameter Fields for Your Preference. Enjoy the Tour !</center></font>
</div>
</center>
<!-- Page Basic Setting -->
<select name="InputSource" class="required page_basic" style="margin-left:23%" form="broadcastform" >
<option value="">Broadcast Input</option>
<option value="0">HDMIPhy</option>
<option value="1">USB Streaming</option>
<option value="2">MPEC-TS Interface</option>
<option value="3">VIP(Ethernet)</option>
</select>
<select name="ModulationMode"class= "page_basic required" style="margin-left:23%" form="broadcastform">
<option value="">Modulation Mode</option>
<option value="1">ATSC</option>
<option value="2">DTMB</option>
<option value="3">DVB</option>
<option value="4">ISDB</option>
</select> Is there a way to center the text of those options within the box? I am struggling to find a solution to adjust the position of the dropdown box.
form {
margin-left:auto;
margin-right:auto;
margin-top:80px;
width: 45vw;
height: 70vh;
padding:30px;
border: 1px solid rgba(0,0,0,.2);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
background: rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0 0 13px 3px rgba(0,0,0,.5);
-webkit-box-shadow: 0 0 13px 3px rgba(0,0,0,.5);
box-shadow: 0 0 13px 3px rgba(0,0,0,.5);
overflow: hidden;
}