I have this sample:
CODE HTML:
<div class="select-style">
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</div>
CODE CSS:
.select-style {
padding: 0;
margin: 0;
border: 1px solid #ccc;
width: 120px;
border-radius: 3px;
overflow: hidden;
background-color: #fff;
background: #fff url("http://www.scottgood.com/jsg/blog.nsf/images/arrowdown.gif") no-repeat 90% 50%;
}
.select-style select {
padding: 5px 8px;
width: 130%;
border: none;
box-shadow: none;
background-color: transparent;
background-image: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.select-style select:focus {
outline: none;
}
I put a picture to understand better what I want to do.
How can I do this on my structure?
Does the current structure? Or have another structure created HTML?
Thanks in advance!
Did you want something like this?
http://codepen.io/anon/pen/bVWmgP
.select-style:after {
content: '';
background-color: #000;
position: absolute;
border-left: 3px solid #F00;
z-index: 0;
top: 0;
right: 0;
bottom: 0;
left: 85px;
}
.select-style:before {
content: '';
background-color: white;
position: absolute;
z-index: -20;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
Note: You won't be able to change select lists arrow color without adding an extra image that will represent that arrow.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments