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.
Related
I set a background image (arrow down) to a select box after setting the webkit-appearance attribute to none. When the option list is opened I want to display another background image (arrow up). Is there a pseudo class or something for it? I couldn't find anything during my research...
you can use the :focus pseudo class.
But this will indicate the "open" state, also when the <select> is selected via tab or an item was just selected. To circumvent this, you maybe use something like select:hover:focus but this is rather ugly and is not a solid solution.
select:focus {
background-color: blue;
color: white;
}
<select>
<option>Click me</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
It's not possible to detect if a HTML select element is opened using CSS, or even javascript.
If you wish to customise the arrow symbol of a custom dropdown, your best option is to use a custom dropdown component which maps to a hidden select element.
This post is old, but as today; the ::before and ::after pseudo-class still don't work on select element.
Here's a good opportunity to use the :focus-within pseudo-class. I made this simple codepen demonstrating the use of it.
The codepen
The snippet :
#charset "UTF-8";
.wrapper {
position: relative;
display: inline-block;
}
.wrapper::after {
content: "";
font-family: "Font Awesome 5 Free";
font-weight: 900;
position: absolute;
right: 16px;
top: 22px;
font-size: 18px;
pointer-events: none;
transition: 0.2s ease;
}
.wrapper:focus-within::after {
transform: rotateX(0.5turn) translateY(-2px);
}
.wrapper select {
background: linear-gradient(180deg, #F8F9FB 0%, #F1F2F4 100%);
border: 1px solid var(--grayscale-400);
box-sizing: border-box;
border-radius: 3px;
width: 200px;
left: 2px;
cursor: pointer;
padding: 24px 12px;
font-size: 16px;
appearance: none;
}
.wrapper select:focus {
outline: unset;
}
.wrapper select > option:first-child {
display: none;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet"/>
<div class="wrapper">
<select>
<option>Choice Label First</option>
<option value="Choice 1">Choice 1</option>
<option value="Choice 2">Choice 2</option>
<option value="Choice 3">Choice 3</option>
<option value="Choice 4">Choice 4</option>
</select>
</div>
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.
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
I have a problem with IE & firefox. I believe the effect I wanted to achieve works only on chrome.
The problem is that it displays the dropdown perfectly in chrome like on this picture below:
and in firefox / ie it displays it in this way:
So, basically it keeps the default dropdown arrow.
here is a code:
<select name="gender">
<option value="">Gender</option>
<option value="male">Male</option>
<option value="female">Female</option>
</select>
and css:
input {
height: 67px;
width: 400px;
border:none;
background:url(../_images/butt-reg.png) no-repeat;
padding: 0 20px;
margin: 0 10px 20px 10px;
text-align:left;
vertical-align: middle;
font-size: 18pt;
color: #666;
I'm sure there is a simple solution to sort it out, but i tried couple of things and nothing was working.
Thank you in advance.
Take a look at Style a Select Box Using Only CSS
Look here: http://result.dabblet.com/gist/3358882/5eeb2b8d4fe6adf243c5c463111d367c7651a029
I have tried to overlay the dropdown button with a custom one by using the after-pseudo-element on the parent node (a label-element in this case). The CSS property pointer-events makes sure that you can still click on the pink button to open the select-control.
Doing this cross-browser using CSS only is real hard (if not impossible) to do. The only way I can think of to style your <select> element is to simulate it. First, insert a hidden text input that'll have the selected value. Here's an example HTML that simulates a dropdown-select element:
<div class = "select">
<div class = "curVal">Gender</div><div class = "arrow">V</div>
<div class = "choices">
<div class = "choice">Male</div>
<div class = "choice">Female</div>
<div class = "choice">Refuse to answer</div>
</div>
</div>
Let's style it:
body {
font-family: 'Arial', Helvetica, Sans-Serif;
}
.select div {
display: inline-block;
}
.curVal {
height: 30px;
width: 150px;
line-height: 30px;
vertical-align: middle;
background-color: rgb(0, 162, 232);
color: white;
}
.arrow {
color: white;
background-color: rgb(0, 140, 200); /* this can be an image */
cursor: pointer;
height: 30px;
line-height: 30px;
vertical-align: middle;
position: absolute;
top: 0px;
}
.choices {
position: absolute;
left: 0px;
top: 30px;
background-color: rgb(255, 127, 39);
color: white;
padding: 3px 3px 3px 3px;
width: 150px;
}
.choices div {
display: block;
cursor: pointer;
}
Some jQuery:
$(document).ready()(function(){
$(".choices").hide();
});
$(".arrow").click(function(event) {
$(".choices").slideToggle("fast");
event.stopPropagation();
});
$(".choice").click(function() {
$(".curVal").html($(this).html());
$(".choices").slideToggle("fast");
event.stopPropagation();
});
$("html").click(function() {
$(".choices").slideUp("fast");
});
Put them all together, you get this: jsFiddle.
I hope that helped you in any manner!