I need to change the background of the drop down box
<select>
<option value="Chrome">Google Chrome</option>
<option value="Fire Fox">Fire Fox</option>
<option value="Opera">Opera</option>
</select>
1)Below is the CSS
2)i can give background but it will be display like below link http://jsfiddle.net/vamsivelaga/9bt5vncg/
select{
float: left;
width: 100px;
height: 26px;
border: 1px solid #d4d4d4;
margin: 10px 0 0 10px;
text-overflow: '';
background: url(http://s24.postimg.org/lyhytocf5/dropdown.png) no-repeat right 0;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
-ms-appearance: none;}
If you want to change the color of the background, just add some color at the end of "background".
For example
.drop_down_style{
background: url(http://s24.postimg.org/lyhytocf5/dropdown.png) no-repeat right #000;
}
The above code adds black color and replaces the default image with the url which is provided.
You can refer to this link if needed.
Related
How do I move this drop down menu arrow so it's not too close to the edge of the drop down menu?
.footer_dropdown select {
color:white;
font-size:18px;
-webkit-appearance:auto!important;
/*webkit browsers */
-moz-appearance: auto!important;
/*Firefox */
appearance: auto !important;
}
You can't really style the default styling of browsers.
Simply remove the default styling from the select box by using appearance: none;
Then, add a background-image to the select tag and give it the proper styling you want. Take a look at my example. You can play a little with the settings.
Giving the position of the background-image with calc, where we place it 100% from the left, and subtract 20px from that; giving it basically the right: 20px; property. Placing it horizontally in the middle is what the 50% does after that.
Then we give it the background-size width and height both 15px; And we don't want it to repeat, so no-repeat.
select{
position: relative;
padding: 20px;
border: 2px solid black;
width: 400px;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
background: #f9f9fa url('https://image.flaticon.com/icons/png/512/32/32195.png') calc(100% - 20px) 50% / 15px 15px no-repeat;
}
<select>
<option value="">--Please choose an option--</option>
</select>
I would like to stylize select input. I added my own arrow from url. I did it changing background in select input. I have problem, because the arrow is too close to the edge. I want to transform background a bit from edge but I do not know how to do this. Maybe you have a better way to solve this problem. Now it looks like this: https://imgur.com/a/IKC8QsZ.
<select>
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
</select>
select{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
appearance:none;
background: url("../assets/icon-dropdown-active.svg") no-repeat right white;
}
select {
margin: 50px;
width: 150px;
padding: 5px 35px 5px 5px;
font-size: 16px;
border: 1px solid #ccc;
height: 34px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: url(https://image.flaticon.com/icons/svg/60/60995.svg) 96% / 15% no-repeat #eee;
}
/* CAUTION: IE hackery ahead */
select::-ms-expand {
display: none; /* remove default arrow on ie10 and ie11 */
}
/* target Internet Explorer 9 to undo the custom arrow */
#media screen and (min-width:0\0) {
select {
background:none\9;
padding: 5px\9;
}
}
<select>
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
</select>
Use background-size property if you want to change the size of the image
I'm trying to style the selected option in a dropdown list. I've found a way to change the background colour but I need to change the text colour. I really could do with doing by css.
nav select{
-webkit-appearance: none;
-moz-appearance:none;
appearance: none;
background: #66822e url(../images/arrow.png) no-repeat right top;
color: #ffffff;
font-size: 100%;
height: 21px;
border: 0;
}
nav option:checked, nav option:hover {
color: #910000 !important;
background: #d1e40a repeat url("data:image/jpeg;base64,/9j/4AAQ...");
}
Is there a way to get the selected text to show in a shade of red? I'm testing in Firefox. Here is a fiddle:
https://jsfiddle.net/urbbjrbg/
I use this CSS to style drop down:
HTML code:
<div class="rd-navbar-contact-info">
<select class="logout" size="1" name="j_idt8">
<option value="Cream Latte">Help</option>
<option value="Extreme Mocha">Profile Settings</option>
<option value="Buena Vista">Logout</option>
</select>
</div>
.logout {
margin: 50px;
/*border: 1px solid #111;*/
background: transparent;
width: 150px;
padding: 5px 35px 5px 5px;
font-size: 16px;
border: 0px solid #ccc;
height: 34px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: url(http://www.stackoverflow.com/favicon.ico) 96% / 15% no-repeat transparent;
color: white;
}
.logout option {
background-color: black;
}
How i can remove the border of the options list? Or can I change it to black?
i think you should try by removing border property or try by making
border:0px solid #000 it might work
You just can't. The fact is you can edit the select box at your will using CSS, but the drop down list isn't HTML, thus is rendered by the browser and/or operative system the user is using to view your page. You can set attributes such as width, height, number of items and background, but you can't set the font, border attributes and so on.
I'd like to remove the overlap between the arrow and text in Chrome if possible.
This is what happens in different browsers:
This is the code:
.search-options-wrapper select {
-webkit-appearance: none;
-moz-appearance: none;
background: url("http://i60.tinypic.com/w888ic.png") no-repeat 88px center;
background-size: 12px;
overflow:hidden;
display: flex;
border: 0;
}
<div class="search-options-wrapper">
<select id="options-primary">
<option>short text</option>
<option>Long text lalalalalaa</option>
</select>
</div>
What I would do is add padding-right that will contain your background image of the down arrow. Then change it's placement so it is not starting 88px from the left of the select box. This way the text doesn't have an opportunity to run into your arrow as it cannot enter the padded area.
.search-options-wrapper select {
-webkit-appearance: none;
-moz-appearance: none;
background: url("http://i60.tinypic.com/w888ic.png") no-repeat right center;
background-size: 12px;
padding-right: 20px;
overflow: hidden;
display: flex;
border: 0;
}
<div class="search-options-wrapper">
<select id="options-primary">
<option>short text</option>
<option>Long text lalalalalaa</option>
</select>
</div>