I have this sample:
link
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!
To add background color in HTML, use the CSS background-color property. Set it to the color name or code you want and place it inside a style attribute. Then add this style attribute to an HTML element, like a table, heading, div, or span tag.
To change the color of the inline text, go to the section of your web page. Simply add the appropriate CSS selector and define the color property with the value you want.
To set a background color for a div or related element in CSS, you use the background-color property.
You can make use of linear-gradient
combined with background-image
.
background-image
property allows combination of url()
and linear-gradient()
so you may try separating the values. Same for the background-position
as we are controlling the url image position with 95px value while the linear gradient is undisturbed with center center.70% gray
to 71% gray
in the linear gradient..select-style {
background-image: url("http://www.scottgood.com/jsg/blog.nsf/images/arrowdown.gif"), linear-gradient(to right, white 70%, gray 70%, gray 71%, lightgray 71%, lightgray 100%);
background-position: 95px center, center center;
background-repeat: no-repeat;
border: 1px solid #ccc;
border-radius: 3px;
margin: 0;
overflow: hidden;
padding: 0;
width: 120px;
}
.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;
}
<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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With