Height of the select option box - html

Question

I have a form in which one input field is select and it has few option.I am not able to increase the height of the option box and background color.presently it has white colour as given in the picture My html code and css code is below
.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;
}
.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;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
<div class="select2">
<i class="fas fa-user-lock" style="color:black; padding:10px;"> Role</i>
<select >
<option value=""></option>
<option value="user">USER</option>
<option value="rec">Recommending Officer</option>
<option value="store">Store</option>
</select>
</div>

Answer 1

You can use this to increase height:
.select2 select{
height: 50px;
background: transparent;
}
Add more properties here to style the box.
Also correct way to use before and after is :
.select2::after {
....
}
Codepen

Answer 2

Try giving style to select tag, this might works!
select{
width: 50%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
font-size: 20px;
}

Answer 3

Try this
.select2 {
width: 100%;
overflow: hidden;
font-size: 20px;
padding: 4px 0;
margin: 4px 0;
}
select{
height:30px;
border-bottom: 2px solid black;
background-color: transparent;
}