Having some trouble with my form code. When I checked the web page, there seems to be an extra element that shouldn't be there. You can view the webpage https://i.sstatic.net/pu4ef.jpg. Inspecting it in browser developer mode, I found this extra element https://i.sstatic.net/DvfJK.jpg. Can you please help me identify the mistake? Here is the code snippet:
<body>
<h1 style="text-align:center;font-size:50px;">Online Stationery Management System (OSMS) </h1>
<div class="login-box">
<h1 >Login</h1>
<form name="signin" method="post">
<div class="select2">
<i class="fas fa-user-lock" style="color:black; padding:5px;"> Role</i>
<select name="role" id="role" >
<option value=""></option>
<option value="user">USER</option>
<option value="rec">Recommending Officer</option>
<option value="store">Store</option>
</select>
</div>
<div class="textbox">
<i class="fas fa-user" style="color:black"></i>
<input type="text" placeholder="Username" name="uin" autocomplete="off">
</div>
<div class="textbox">
<i class="fas fa-lock" style="color:black"></i>
<input type="password" placeholder="Password" name="password" autocomplete="off">
</div>
<input type="button" class="btn1" value="Forget Password" style="width:65%;margin-right:5px;">
<input type="submit" class="btn" name="signin"value="Sign in" style="width:30%">
</div>
</form>
Here is my CSS code for the file:
.select2 {
width: 100%;
overflow: hidden;
font-size: 20px;
padding: 4px 0;
margin: 4px 0;
border-bottom: 2px solid black;
background-color: transparent;
}
.select2 option{
width: 26px;
background-color: none ;
border: none;
background: none;
color: blue;
font-size: 20px;
font-weight:bold;
float: left;
margin: 0 10px;
white-sapce: no-wrap;
text-overflow: ellipsis;
background-color: none;
}
.select2 select{
height: 30px;
background-color: transparent;
border: none;
font-size: 15px;
font-weight:bold;
}
.select2::after {
!content: 'Select Role';
font-family: 'material icons';
font-size: 24px;
color: red;
position: absolute;
right: 10px;
top: 10%;
transform: translateY(-50%);
pointer-events: none;
}