How to customize a select element through CSS to achieve this dark style?
How can I create a select element like the below image?
My code is
<select>
<option>-- Select City --</optoin>
<option>Delhi</option>
<option>Gurgaon</option>
</select>
This is available in jQuery, but I want to use pure CSS.
Solution 1:
Here is a CSS-powered select menu; you can customize it as you need to:
label.custom-select {
position: relative;
display: inline-block;
}
.custom-select select {
display: inline-block;
padding: 4px 3px 3px 5px;
margin: 0;
font: inherit;
outline:none; /* remove focus ring from Webkit */
line-height: 1.2;
background: #000;
color:white;
border:0;
}
/* Select arrow styling */
.custom-select:after {
content: "▼";
position: absolute;
top: 0;
right: 0;
bottom: 0;
font-size: 60%;
line-height: 30px;
padding: 0 7px;
background: #000;
color: white;
pointer-events: none;
}
.no-pointer-events .custom-select:after {
content: none;
}<label class="custom-select">
<select>
<option>Sushi</option>
<option>Blue cheese with crackers</option>
<option>Steak</option>
<option>Other</option>
</select>
</label>JSFiddle
Solution 2:
Using the pointer-events:none; it will let you click through the arrow and will activate the select field, So the CSS would look like this for that element.
.custom-select:after {
content: "▼";
position: absolute;
top: 0;
right: 0;
bottom: 0;
font-size: 60%;
line-height: 30px;
padding: 0 7px;
background: #000;
color: white;
pointer-events:none;
}