Height of the select option box

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;">&nbsp;&nbsp;Role</i>
  <select >
  <option value=""></option>
  <option value="user">USER</option>
  <option value="rec">Recommending Officer</option>
  <option value="store">Store</option>
  </select>
</div>

Does this answer your question? [How to style the option of an html "select" element?](https://stackoverflow.com/questions/7208786/how-to-style-the-option-of-an-html-select-element) — לבני מלכה, Jul 06 '21 at 04:07

score 0 · Answer 1 · answered Jul 06 '21 at 04:13

0

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;
}

answered Jul 06 '21 at 04:13

Uttam

718
6
19

Tushar Shahi · Accepted Answer · 2021-07-06T04:23:01.947

0

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

edited Jul 06 '21 at 04:23

answered Jul 06 '21 at 04:14

Tushar Shahi

16,452
1
18
39

height is working but color property not working ,i want it transparent – room Jul 06 '21 at 04:21
Because you are targetting the wrong element. You are changing styles for div with select2 class. You have to style – Tushar Shahi Jul 06 '21 at 04:23

score 0 · Answer 3 · answered Jul 06 '21 at 04:36

0

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;
}

answered Jul 06 '21 at 04:36

Mohamed Sakeel

36
9

Height of the select option box

3 Answers3

Linked