I have problem with select and options, in firefox I see this normal (small), but in google chrome, it's very big and not pretty!
The 2nd photo shows - what I want to see and 1st shows - what I see.
I want in <option>:
font-size: 20px;
I want in <select>:
text-align: center;
<select id="what">
<option value="0">0</option>
<option value="100">100</option>
<option value="1000">1000</option>
</select>
<style>
#what {
width: auto;
height: 60px;
border: 0px solid #333;
appearance: none;
text-align: center;
-moz-appearance: none;
-webkit-appearance: none;
font-size: 45px;
color: red;
background: rgba(0,0,0,0);
border-bottom: 1px solid red;
outline: none;
}
#what > option {
height: 40px;
color: #333;
border: 0px;
}
</style>
Please help.
Trying to style select boxes is going to get you a lot of cross-compatibility trouble. You won't be able to fix this with just CSS.
I'm afraid you're going to need to write or find a custom select box. I had a very similar problem and ended up writing my own with Javascript. But that was a while ago - you might be able to find something open source.
Related
I currently have a select element as follows:
<select class="select" id="startYear" onChange={(event) => setStartYear(event.target.value)}>
Then I have a bunch of options elements as well. Each looking as follows:
<option value=2017 selected={2017 == startYear}>2017</option>
<option value=2018 selected={2018 == startYear}>2018</option>
//lots of different years continuing on
I'm hoping to make it so that there's a static text that says "Start:" and then the dropdown is just all of the years (without the text). See the image below as an example. Anyone know where I can add the "Start:" text?
You would usually use a label for this kind of thing, where the label is to the left and the select box to the right.
div {
border: 1px solid black;
width: 100px;
border-radius: 15px;
padding: 5px 0 5px 10px
}
select {
border: none
}
<div>
<label for="start">Start: </label>
<select id="start">
<option>2017</option>
</select>
</div>
There is still an arrow there which your example image doesn't show, however, I would argue that you want to have the arrow there to denote that it's a select box/drop down. Without it, there's no indication and it's not friendly UX.
I was able to achieve this effect by surrounding the whole thing in a div, and adding the text and select there. With some css, it looks like a normal select prompt. You may have to fiddle with some of the variables to make it to your liking.
.select{
display: inline-block;
border: 2px solid black;
border-radius: 5px;
padding: 5px;
}
.select select {
display: inline-block;
border: none;
background-color: transparent;
}
.select select:focus-visible{
background-color: transparent;
border: none;
outline: none;
}
.select p {
display: inline-block;
text-align: center;
margin: 0;
}
<div class="select">
<p>Start:</p>
<select>
<option>15432542</option>
<option>54326</option>
<option>654262</option>
</select>
</div>
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'm trying to customize a select element with only CSS, found this:
<div class="cs_div">
<select>
<option>Option 1</option>
<option>Option 2</option>
</select>
</div>
css:
.cs_div {
border: 1px solid #ccc;
border-radius: 3px;
overflow: hidden;
background: #fafafa url("../images/select.png") no-repeat;
width: 190px;
}
.cs_div select {
margin: 0;
padding: 5px 8px;
width: 215px;
border: none;
box-shadow: none;
background: transparent;
background-image: none;
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
appearance: none;
}
.cs_div select:focus {
outline: none;
}
works great, but something on main stylesheet of site adds a "blank space" at bottom of div, in chrome, in firefox this doesn't occur.
chrome:
firefox:
already tried padding-bottom: 0; margin-bottom: 0; but not works...
here is a test site with the custom select element: http://eliterosa.bl.ee/activity/
Your question is a bit vague but you may be referring to the vertical alignment of the now inline-block div. You just need to use vertical-align: middle; to div#activity-filter-by-outer...
#activity-filter-by-outer { display: inline-block; vertical-align: middle; }
Now that you made the div an inline block it takes up line-height much like other inline elements.
See screen shot:
Just figured out a way to remove the select arrow from Firefox. The trick is
to use a mix of -prefix-appearance, text-indent and text-overflow.
select {
-webkit-appearance: none;
-moz-appearance: none;
text-indent: 1px;
text-overflow: '';
}
It's pure CSS and requires no extra markup. Tested on Ubuntu and Linux,
latest versions.
Live example: http://jsfiddle.net/4WVZW/
by: Ricardo Fuhrmann
On IE8,9 and 10 a select element looks like the attached picture. The drop down arrow is replaced with something that looks more or less like a mouse.
On Firefox and Chrome it looks like a standard drop down with a down arrow.
I can't find anywhere that I've done anything with CSS to alter selects.
Any suggestions?
<td>
<select id='allocated' name='alloc' onchange='allocChange()'>
<option value='??' selected='selected'>??</option>
<option value='1A' >1A</option>
<option value='1B' >1B</option>
<option value='1C' >1C</option>
<option value='2A' >2A</option>
<option value='2B' >2B</option>
<option value='3A' >3A</option>
</select>
</td>
CSS not a factor - same thing happens even when stylesheet not loaded
It may be by default.. But you can change the arrow using css
.styleSelect select {
background: transparent;
width: 168px;
padding: 5px;
font-size: 16px;
line-height: 1;
border: 0;
border-radius: 0;
height: 34px;
-webkit-appearance: none;
color: #000;
}
.styleSelect {
width: 140px;
height: 34px;
overflow: hidden;
background: url("images/downArrow.png") no-repeat right #fff;
border: 2px solid #000;
}
I have a select field and no matter what I do I can't get the text to stop sticking to the top of the box.
Here is an example of how it looks:
If I use padding-top then it pushes down the arrow button as well, which I don't want. I have also tried line-height with no effect.
Here is the relevant CSS:
#header .nav .misc .search .search_holder .cats select {
width: 111px;
height: 29px;
border-top: 1px solid #97ad00;
border-bottom: 1px solid #97ad00;
border-left: none;
border-right: none;
padding-left: 8px;
font-family: Roboto, Arial;
font-size: 14px;
background: url('../images/search-cats-bg.png') 0 0 repeat-x;
color: #b2b2b2;
}
#header .nav .misc .search .search_holder .cats select option {
padding-top: 5px;
}
#header .nav .misc .search .search_holder .cats select option.last {
padding-bottom: 5px;
}
Edit: Added HTML.
HTML:
<div class="cats">
<select id="search_cats" class="search_cats" name="cat">
<option value="all">All Categories</option>
<option value="sports">Sports Cards</option>
<option value="gaming">Gaming Cards</option>
<option value="non-sport">Non-Sport Cards</option>
<option value="supplies" class="last">Supplies & Storage</option>
</select>
</div>
Why is it doing this and how can I fix it?
Edit: Seems it can't really be fixed, found this question:
I want to vertical-align text in select box
If you look at the answer from "Shelly Skeens" then you will find that FF decided to set the built-in line-height to normal !important and hence it can't be overridden.
try add that
.cats * { line-height: 16px; }
works fine on google chrome ,and google developer tools