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;
}
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've created a new select style for use in certain pages, while this works fine I'm struggling to get the dropdown arrow to show. I'm trying to display an arrow from a font (font loads and is fine, issue is how I'm trying to get it working)
The below is an example of one of the dropdowns I've got on a page, right now there's no arrow at all being displayed.
/** dropdown styling **/
.selectadmin {
box-sizing: border-box;
color: #666;
background: #fff;
height: 30px;
box-shadow: inset 0 -5px 7px rgba(0, 0, 0, 0.08);
border: 1px solid #d8d8d8;
border-radius: 5px;
}
/** dropdown arrow **/
.selectadmin:before {
font-family: 'WebSymbolsRegular';
content: ';';
position: absolute;
right: 9px;
top: 0;
line-height: 235%;
height: 100%;
padding-left: 10px;
border-left: 1px solid #d7d7d7;
}
/** dropdown arrow **/
.selectadmin:after {
font-family: 'WebSymbolsRegular';
content: ':';
font-size: 18px;
position: absolute;
top: 0;
line-height: 120%;
}
<tr>
<td width="40%" class="trow2admin"><strong><span class="admintitle">Selection:</span></strong></td>
<td width="60%" class="trow2admin"><select class="selectadmin" ; style="width:48%" ;>
<option value="default">General</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five/option>
<option value="6">Six</option>
</td>
</select>
</tr>
Help would definitely be appreciated, I tried wrapping but it didn't work at all. All It did was create a non-workable copy of the dropdown style, no font arrow either.
It's quite likely that the problem is the use of pseudo elements on a select tag - I don't think that's possible.
As a workaround, try wrapping the select in an extra div, and then moving the before and after on to that element.
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.
select item option lists are not showing properly in IE.
need to add padding and height for option element. Does any one knows how to fix this?
CSS
.reser_item_long select {
width: 106%;
width: 106.5%\9;
height: 33px;
*height: 33px;
float: left;
text-align: left;
border: none;
outline: none;
background: none;
cursor: pointer;
overflow: hidden;
text-transform: uppercase;
font-size: 10px;
color: #889099;
color: #889099\9 !important;
padding: 9px 0 0 7px;
padding: 0 0 0 7px\9 ;
padding: 0 0 0 7px\0/;
display:block;
(-bracket-:hack;
padding: 2px 0 0 7px ;
);
}
HTML
<div class="reser_item_long">
<div class="select-wrapper">
<select id="cmb-country" name="cmb-country">
<option value="-1">Please Select a Country</option>
<option value="0">Afghanistan</option>
<option value="0">Åland Islands</option>
<option value="0">Albania</option>
<option value="0">Algeria</option>
</select>
</div>
</div>
There is no work-around for this aside from ditching the select element
You should differently edit this question and add you browser version. But let me give you a solution after all.
The problem is that the Select, options, file inputs are rendered by the OS/Browser and not by the HTML itself and therefor give's problem in styling it.
You can via javascript simulate and style your own dropdown to make sure it looks the same way in every browser and OS. Basically it generates something that look and feels like a dropdown list but is just an interface for the hidden select in your code.
You could use something like http://formalize.me/ to style all forms elements on your page.