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
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 have to modify an application in order to work on IE11. Now I find the comboboxes weird looking
I do not know what to do to fix them.
The combobox code:
<select name="Trimestre">
<option value="Q1">Q1
<option value="Q2">Q2
<option value="Q3">Q3
<option value="Q4">Q4
</select>
SELECT {
z-index:1
font-family: Arial, verdana;
font-size:8pt;
color:#0060A0;
background-color:#C2EFFF;
text-decoration: none;
border-bottom: groove #C2EFFF 10px;
border-right: groove #C2EFFF 2px;
border-left: ridge #FEFEFE 2px;
padding-right:2px;
padding-left:2px;
padding-bottom:20px;
}
SELECT {
padding-bottom: 6px;
}
Try reducing the pixels of the padding on the bottom.
Is the drop down giving the list of items?
This is the problem:
padding-bottom: 20px;
Just change or remove it.
And you have this:
border-bottom: 10px groove #c2efff;
Reduce or remove it.
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 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.
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;
}