I have a select option markup like this
<div class="styleselect">
<select onchange="setLocation(this.value)" class="selections">
<option selected="selected" value="position">Position</option>
<option value="name">Name</option>
<option value="price">Price</option>
</select>
</div>
Here I want to style the default arrow of select option and I changed my css like this
.styleselect {
background-color: #DFD3C3;
background-image: url("http://s21.postimg.org/nx05vn15f/dropdown_style.png");
background-position: 117px center;
background-repeat: no-repeat;
border: 1px solid #C5AF8A;
overflow: hidden;
vertical-align: middle;
width: 140px;
padding: 0;
margin: 0;
display: inline-block;
}
.styleselect select {
background-color: transparent;
margin: 0 0 1px;
padding: 4px;
vertical-align: middle;
width: 190px;
}
It worked fine. But again I got one problem that when I made click on the options the options came with the extra width from the actual width where it is looking really odd. I know that the extra width is coming from the width .styleselect select where I have put extra width. But that has been donefor the styling the arrow. Can someone kindly tell me how to fix the extrawidth so that the my custom arrow should come in place for default arrow in the select options and the extra width for the options will be also hide. The link for fiddle is here
Any help and suggestions will be really appreciable. Thanks
Here you go... I have added the same color for options also just to have an uniform look for the control. Hope it helps.
CSS code :
select{
appearance:none; -moz-appearance:none; -webkit-appearance: none;
}
.styleselect {
background-color: #DFD3C3;
background-image: url("http://s21.postimg.org/nx05vn15f/dropdown_style.png");
background-position: 117px center;
background-repeat: no-repeat;
border: 1px solid #C5AF8A;
overflow: hidden;
vertical-align: middle;
width: 140px;
padding: 0;
margin: 0;
display: inline-block;
}
.styleselect select {
background-color: transparent;
margin: 0 0 1px;
padding: 4px;
vertical-align: middle;
width: 140px;
}
.styleselect select option{
background-color: #DFD3C3;
overflow: hidden;
vertical-align: middle;
width: 140px;
padding: 0;
margin: 0;
display: inline-block;
}
Styling the select is cumbersome. You may get browser issues. But you can use advance plugin for styling select box like http://ivaynberg.github.io/select2/. This also provide lots of other features.
.styleselect select {
width=auto;
}
Related
Trying to figure out a problem with a styled select box. It is wrapped within a div with a background to create a mask-look to it.
When there is too much text in the input it will overflow into the button.
HTML:
<div class="styled-select">
<select class="form-control required" name="address" disabled>
<option style="" value="">Please Select Address</option>
</select>
</div>
CSS:
.styled-select select {
font-family: "Circular", Helvetica, Arial, sans-serif;
font-size: 18px;
background: transparent;
width: 100%;
padding: 15px;
font-size: 16px;
line-height: 1;
border: 0;
height: 50px;
border-radius: 10px;
-webkit-appearance: none;
padding-right: 10%;
}
.styled-select {
width: 100%;
overflow: hidden;
background: url(../images/bg/down-arrow.jpg) no-repeat right #FFF;
background-size: 60px;
height: 50px;
border-radius: 10px;
}
#media (min-width: 768px) {
.styled-select select {
font-family: "Circular", Helvetica, Arial, sans-serif;
font-size: 18px;
background: transparent;
width: 100%;
padding: 18px;
font-size: 18px;
line-height: 1;
border: 0;
height: 55px;
border-radius: 10px;
-webkit-appearance: none;
padding-right: 10%;
}
.styled-select {
width: 100%;
overflow: hidden;
background: url(../images/bg/down-arrow.jpg) no-repeat right #FFF;
background-size: 60px;
height: 55px;
border-radius: 10px;
}
Can anyone solve this?
The problem is, that you are using padding-right: 10%; in your css on the select itself. Measuring the image - the select is approx 270px wide, making 10% of the width only 27px - which is correct by my measures.
To solve this - the background-image for arrow seems to be 60px wide, so use padding-right: 78px; (that is 60px for the background image's width and 18px to respect the padding in mobile media query you've previously set).
See this Fiddle
.styled-select select {
font-family: "Circular", Helvetica, Arial, sans-serif;
font-size: 18px;
background: transparent;
width: 100%;
padding: 15px;
font-size: 16px;
line-height: 1;
border: 0;
height: 50px;
border: 1px solid #0082ff; /* Just to see the area of the form in white bg */
border-radius: 10px;
-webkit-appearance: none;
padding-right: 55px;
box-sizing: border-box;
}
.styled-select {
width: 200px;
overflow: hidden;
background: url(http://emojipop.net/data/images/emoji_set_651.png) no-repeat right #FFF;
background-size: 50px;
height: 50px;
border-radius: 10px;
text-overflow: ellipsis;
}
#media (min-width: 768px) {
.styled-select select {
font-family: "Circular", Helvetica, Arial, sans-serif;
font-size: 18px;
background: transparent;
width: 100%;
padding: 18px;
font-size: 18px;
line-height: 1;
border: 0;
height: 55px;
border-radius: 10px;
-webkit-appearance: none;
padding-right: 10%;
}
.styled-select {
width: 100%;
overflow: hidden;
background: url(http://emojipop.net/data/images/emoji_set_651.png) no-repeat right #FFF;
background-size: 60px;
height: 55px;
border-radius: 10px;
}
<div class="styled-select">
<select class="form-control required" name="address">
<option style="" value="">Please Select Address</option>
<option style="" value="">Please Select Address2</option>
<option style="" value="">Please Select Address3</option>
</select>
</div>
without seeing any of your code, it is a bit hard to tell how you're setting up the HTML to be structured. But one thing you could do is fudge it. Make it appear as if thats what is happening. Assuming your dropdown arrow is a separate element from your select item you could give it some of the following code. (.select button is the class i gave to your button on the dropdown)
.selectButton {
display: block;
position: absolute;
height: 100%;
width: 20%;
max-width: 40px;
background: blue;
z-index: 12;
right: 0;
top: 0;
box-shadow: -24px 0px 30px rgba(255, 255, 255, 1);
}
basically what this does is put it in front of the input text element and then the box shadow does the trick of gradually covering up the additional text.
If you need to fudge it without altering the original element, create a parent wrapper with a div or something within the it and have the select element be a sibling then give it a style of pointer-events: none; in order to prevent it from being clicked on but will still have the appearance that you want.
Some people may say this is bad practice, but given the situation this is about the best thing you can do. very easy, very light and more functional than many of the options provided.
Holler if you have any questions!
Good Luck buddy!
after comment
try this css per info from comment. It'd be best to create a psuedo element with a background color, bg image and a box shadow on it with a z-index that is higher than the select to create a fake button that will still be make the select clickable.
.styled-select {
/*have this create the size of the select*/
width: 100%;
overflow: hidden;
background-repeat: no-repeat;
-webkit-background-size: 80% 80%;
background-size: 80% 80%;
height: 50px;
position: relative;
}
.style-select::before {
content: '';
display: block;
position: absolute;
right: 0;
background-color: $blue;
top: 50%;
transform: translateY(-50%);
width: 60px;
height: 100%;
background: url(../images/bg/down-arrow.jpg);
/* ^^^^ use this as just the white arrow png ^^^ */
box-shadow: -24px 0px 30px rgba(255, 255, 255, 1);
pointer-events: none;
}
Hello there:
This is my solution, you shall take in a variable, which will be the BG-size of the 'down-arrow'. In this case 60px, so here is it:
.styled-select select{
width: calc( 100% - 60px / 2); //before was width: 100%;
text-overflow: ellipsis;
}
#media (min-width: 768px) {
.styled-select select {
width:100%; //remove it, only one in the mobile first declarationis needed
}
}
Keep all the other CSS same, only changed the above mention ones. HOPE THIS HELPS
You are using a percentage value (10%) for the padding-right of the select element in 2 different places. However, for the background-size property of the .styled-select element you are using a fixed pixel value (60px).
This means that when the .styled-select element is exactly 600px wide, the text of the child select element will be clipped at the point the background-image begins - any bigger and you will start to see white space appear between the text and image, any smaller and the text will start to overlap the image.
So, to solve this, you should change the padding-right to a fixed pixel value equal to the background-size value plus a few extra pixels so the text doesn't run right up to the background-image.
I've also taken the liberty of cleaning up your CSS a bit; you don't need to redeclare all styles within a media query, only those you wish to override or change.
.styled-select{
background:#fff linear-gradient(0deg,#00f,#00f) right / 60px repeat-y;
/** DELETE LINE ABOVE AND UNCOMMENT LINE BELOW **/
/* background:#fff url(../images/bg/down-arrow.jpg) right center / 60px no-repeat;*/
border-radius:10px;
height:50px;
overflow:hidden;
width:100%;
}
.styled-select select{
-webkit-appearance:none;
background:transparent;
border:0;
border-radius:10px;
font-family:Circular,Helvetica,Arial,sans-serif;
font-size:16px;
height:50px;
line-height:1;
padding:15px 75px 15px 15px;
width:100%;
}
#media (min-width:768px){
.styled-select{
height:55px;
}
.styled-select select{
font-size:18px;
height:55px;
line-height:1;
padding-right:78px;
}
}
body{
background:#003;
}
<div class="styled-select">
<select class="form-control required" name="address" disabled>
<option value="">Please Select Address</option>
</select>
</div>
Try this:
.styled-select select {
white-space: nowrap;
width: 10em;
overflow: hidden;
text-overflow: ellipsis;
}
I am trying to create a small donut hold icon - green.
Here is what I tried :
.success-icon {
border: 1px #62ae41 solid;
border-radius: 10px;
width: 30px;
height: 30px;
}
<div class="col-lg-3"><span class="sucess-icon"> </span>greater than or equal to 75%</div>
I couldn't get it to display. I am not sure what is going on.
By default a <span> is display: inline and so height and width do not apply to it.
Set display: inline-block or some other value to which those properties apply.
You also need to make sure you spell your class names consistently or the selector will not match.
.success-icon {
border: 1px #62ae41 solid;
border-radius: 10px;
width: 30px;
height: 30px;
display: inline-block;
}
<div class="col-lg-3"><span class="success-icon"> </span>greater than or equal to 75%</div>
use display:inline-block in the style
.success-icon {
border:1px #62ae41 solid;
border-radius: 10px;
width: 30px;
height: 30px;
display: inline-block;
}
Here are some extra styles to match it to what you were kinda wanting.
.success-icon {
border: 8px #62ae41 solid;
border-radius: 100%;
width: 30px;
height: 30px;
margin: 0 5px 0 0;
display: inline-block;
vertical-align: middle;
}
.col-lg-3{
vertical-align: middle;
}
<div class="col-lg-3"><span class="success-icon"></span>greater than or equal to 75%</div>
1st sorry if the title is not 100% at the pont, i really have no idea how to compose it.
Anyway here is a simple problem with 100% width layout. I have a form that is inside a fluid container, it has - 1 input, 1 select, 1 button, they all are align inline (horizontal)
the problem when i minimize the window the button and then the select list they move down. which i dont want that.
Here is a example in the fiddle http://jsfiddle.net/4GSLE/ you can minimize the html part and you will see the problem.
How to make them to be in one line and not to move down?
.main {
max-width: 1200px;
margin: 0px auto;
background-color: #eee;
line-height: 50px;
padding: 10px;
}
form {
padding: 0 0 0 0;
margin: 0 0 0 0;
display: block;
}
.clear {clear: both;}
input, select {
float: left;
height: 50px !important;
padding: 0 10px;
width: 66% !important;
border: 1px solid #d6d8db;
margin-right: 20px;
}
input.button {
height: 54px !important;
padding: 0 10px;
margin-top: -1px !important;
width: 125px !important;
border: 1px solid #d6d8db !important;
background: #333;
cursor: pointer;
color: #fff;
}
select {
width: 200px !important;
height: 52px !important;
}
html:
<div class="main">
<form>
<input type="text" name="" value="search" />
<select>
<option>select</option>
</select>
<input type="submit" name="" value="Search now" class="button" />
</form>
<div class="clear"></div>
</div>
Some CSS tweaking to the form, input, and select selectors should do the trick.
form {
padding: 0;
margin: 0;
display: block;
white-space: nowrap;
}
input, select {
display: inline-block;
height: 50px;
padding: 0 10px;
width: 66%;
border: 1px solid #d6d8db;
margin-right: 20px;
}
Demo Here
Side note: Unless you really need them, all those !important declarations will end up causing more trouble than solving issues. I'd avoid !important as much as possible.
This css code has troubles for ie7. In ie6 is a total absolute mess.
The problem is that the input textbox gets bellow label.
Only work around is to float the div left but has problems then with sizing..
fieldset.label_side > label {
width: 100px;
position: relative;
float: left;
left: 0;
padding: 18px 20px 8px;
border-right: 1px solid #eee;
clear: left;
line-height: normal;
}
fieldset label{
font-size: 13px;
font-weight: bold;
padding: 15px 20px 10px;
margin-right: 10px;
display: inline-block;
color: #333;
}
fieldset.label_side > div {
width: auto;
margin-left: 140px;
padding: 15px 20px;
border-left: 1px solid #eee;
clear: right;
display: block;
}
.box-block fieldset input{
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
input.text{
width: 100% !important;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border : solid #eee 1px;
background-color: #fbfbfb;
line-height: 32px;
display: inline;
height: 32px;
padding: 0px 0 0 5px;
}
UPDATE
I found that the problem is because of the input width 100%.. I am looking how to fix it.
IE6 and IE7 don't play nice when the display is set to "inline-block";
Try adding the following to your label's CSS rule:
fieldset label{
display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;
}
I would probably have a conditional sheet for IE browsers (usually how I deal with this problem). Here's a site that exlains the problem in better details than I ever could: http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/
May be you have to write vertical-align:top in your label & input . Write like this:
label, input{
vertical-align:top;
}
One solution that may work (it works for me) is to apply negative margin at input (textbox)... or fixed width for ie7 or to drop ie7 support.
I had the same problem and i hated to have extra divs for border etc!
So here is my solution which seems to work!
You should use a ie7 only stylesheet to avoid the starhacks.
input.text{
background-color: #fbfbfb;
border : solid #eee 1px;
width: 100%;
-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
height: 32px;
*line-height:32px;
*margin-left:-3px;
*margin-right:-4px;
display: inline;
padding: 0px 0 0 5px;
}
I would like to add some style on a select box with the pseudo :after (to style my select box with 2 parts and without images). Here's the HTML:
<select name="">
<option value="">Test</option>
</select>
And it doesn't work. I don't know why and I didn't find the answer in the W3C specs. Here's the CSS:
select {
-webkit-appearance: none;
background: black;
border: none;
border-radius: 0;
color: white;
}
select:after {
content: " ";
display: inline-block;
width: 24px; height: 24px;
background: blue;
}
So is it normal or is there a trick?
I haven't checked this extensively, but I'm under the impression that this isn't (yet?) possible, due to the way in which select elements are generated by the OS on which the browser runs, rather than the browser itself.
I was looking for the same thing since the background of my select is the same as the arrow color. As previously mentioned, it is impossible yet to add anything using :before or :after on a select element. My solution was to create a wrapper element on which I added the following :before code.
.select-wrapper {
position: relative;
}
.select-wrapper:before {
content: '\f0d7';
font-family: FontAwesome;
color: #fff;
display: inline-block;
position: absolute;
right: 20px;
top: 15px;
pointer-events: none;
}
And this my select
select {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
width: 100%;
padding: 10px 20px;
background: #000;
color: #fff;
border: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
select::-ms-expand {
display: none;
}
I have used FontAwesome.io for my new arrow, but you can use whatever else you want. Obviously this is not a perfect solution, but depending on your needs it might be enough.
To my experience it simply does not work, unless you are willing to wrap your <select> in some wrapper. But what you can do instead is to use background image SVG. E.g.
.archive .options select.opt {
-moz-appearance: none;
-webkit-appearance: none;
padding-right: 1.25EM;
appearance: none;
position: relative;
background-color: transparent;
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' height='10px' width='15px'%3E%3Ctext x='0' y='10' fill='gray'%3E%E2%96%BE%3C/text%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: 1.5EM 1EM;
background-position: right center;
background-clip: border-box;
-moz-background-clip: border-box;
-webkit-background-clip: border-box;
}
.archive .options select.opt::-ms-expand {
display: none;
}
Just be careful with proper URL-encoding because of IE. You must use charset=utf8 (not just utf8), don't use double-quotes (") to delimit SVG attribute values, use apostrophes (') instead to simplify your life. URL-encode s (%3E). In case you havee to print any non-ASCII characters you have to obtain their UTF-8 representation (e.g. BabelMap can help you with that) and then provide that representation in URL-encoded form - e.g. for ▾ (U+25BE BLACK DOWN-POINTING SMALL TRIANGLE) UTF-8 representation is \xE2\x96\xBE which is %E2%96%BE when URL-encoded.
What if modifying the markup isn't an option?
Here's a solution that has no requirements for a wrapper: it uses an SVG in a background-image.
You may need to use an HTML entity decoder to understand how to change the fill colour.
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23000000%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
background-repeat: no-repeat;
background-position: right .7em top 50%;
background-size: .65em auto;
Pinched from CSS-Tricks.
Faced the same problem. Probably it could be a solution:
<select id="select-1">
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>
<label for="select-1"></label>
#select-1 {
...
}
#select-1 + label:after {
...
}
This post may help http://bavotasan.com/2011/style-select-box-using-only-css/
He is using a outside div with a class for resolving this issue.
<div class="styled-select">
<select>
<option>Here is the first option</option>
<option>The second option</option>
</select>
</div>
This solution is similar to the one from sroy, but with css triangle instead of web font:
.select-wrapper {
position: relative;
width: 200px;
}
.select-wrapper:after {
content: "";
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 6px solid #666;
position: absolute;
right: 8px;
top: 8px;
pointer-events: none;
}
select {
background: #eee;
border: 0 !important;
border-radius: 0;
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
text-indent: 0.01px;
text-overflow: "";
font-size: inherit;
line-height: inherit;
width: 100%;
}
select::-ms-expand {
display: none;
}
<div class="select-wrapper">
<select>
<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="3">option 3</option>
</select>
</div>
This is a modern solution I cooked up using font-awesome. Vendor extensions have been omitted for brevity.
HTML
<fieldset>
<label for="color">Select Color</label>
<div class="select-wrapper">
<select id="color">
<option>Red</option>
<option>Blue</option>
<option>Yellow</option>
</select>
<i class="fa fa-chevron-down"></i>
</div>
</fieldset>
SCSS
fieldset {
.select-wrapper {
position: relative;
select {
appearance: none;
position: relative;
z-index: 1;
background: transparent;
+ i {
position: absolute;
top: 40%;
right: 15px;
}
}
}
If your select element has a defined background color, then this won't work as this snippet essentially places the Chevron icon behind the select element (to allow clicking on top of the icon to still initiate the select action).
However, you can style the select-wrapper to the same size as the select element and style its background to achieve the same effect.
Check out my CodePen for a working demo that shows this bit of code on both a dark and light themed select box using a regular label and a "placeholder" label and other cleaned up styles such as borders and widths.
P.S. This is an answer I had posted to another, duplicate question earlier this year.
<div class="select">
<select name="you_are" id="dropdown" class="selection">
<option value="0" disabled selected>Select</option>
<option value="1">Student</option>
<option value="2">Full-time Job</option>
<option value="2">Part-time Job</option>
<option value="3">Job-Seeker</option>
<option value="4">Nothing Yet</option>
</select>
</div>
Insted of styling the select why dont you add a div out-side the select.
and style then in CSS
.select{
width: 100%;
height: 45px;
position: relative;
}
.select::after{
content: '\f0d7';
position: absolute;
top: 0px;
right: 10px;
font-family: 'Font Awesome 5 Free';
font-weight: 900;
color: #0b660b;
font-size: 45px;
z-index: 2;
}
#dropdown{
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
height: 45px;
width: 100%;
outline: none;
border: none;
border-bottom: 2px solid #0b660b;
font-size: 20px;
background-color: #0b660b23;
box-sizing: border-box;
padding-left: 10px;
padding-right: 10px;
}
Instead of a wrapper element you can use CSS grid and place an icon (or whatever) in the same cell as the select:
.select-field {
display: grid;
grid-template:
"label"
"select"
/ max-content;
}
.label {
grid-area: label;
}
.select {
appearance: none;
background: white;
border: 1px solid var(--border-color);
grid-area: select;
padding-block: 0.5ex;
padding-inline: 1ch calc(1ch + 1em);
}
.after {
align-self: center;
border-block-start: 0.5em solid var(--border-color);
border-inline: 0.5em solid transparent;
block-size: 0;
grid-area: select;
inline-size: 0;
justify-self: end;
margin-inline-end: 1ch;
pointer-events: none;
}
.select,
.select + .after {
--border-color: silver;
}
.select:hover,
.select:hover + .after {
--border-color: grey;
}
.select:focus,
.select:focus + .after {
--border-color: rebeccapurple;
}
<div class="select-field">
<label for="my-select" class="label">Select One</label>
<select id="my-select" class="select">
<option value="foo">Foo</option>
<option value="bar">Bar</option>
<option value="baz">Baz</option>
</select>
<div class="after"></div>
</div>
Here I used an empty div to and styled it to be a CSS triangle which has the same color as the border which changes during hover/focus.
The most important bits here are the following:
The <select> and the <div class="after"> go into the same grid-area (which I named select). This will put the empty div over the select.
Give the <select> an appearance of none. This will remove any browser default style.
Give the <select> and extra padding at the end of the inline direction to make room for the empty style.
Justify the empty div to the end.
Give the empty div an extra margin at the end of the inline direction which matches your desired padding of the <select>
Give the empty div a pointer-events of none so the click will go through it to the <select> element.
Other then that you can do whatever with the empty div. It doesn’t even have to be empty. E.g. you can put an svg icon in there if you want.
If you chose to use the select::after method, remember that:
.select::after{
...
pointer-events: none;
...
for clickable..