I have been trying to get rid of the default gradient background in Website. I know if I set the -webkit-appereance:none this would be possible but then I will lose the arrows and other behaviors in the dropdown that I want. Is there anyway of setting the background to white with the -webkit-appearance: menulist ?
This is what I have but the background does not change
.ius select{
-webkit-appearance: menulist;
-moz-appearance: menulist;
appearance: menulist;
height:32px;
border:1px solid #c8c8c8;
width:250px;
background:rgba(255, 255, 255, 0);
background: transparent;
}
The appearance property is generally used for two things:
Mimicking the native styling of other elements
OR removing all native styling (setting appearance to none)
It's a pretty weird property.
Since you want to remove the native default background, you need to set appearance to none. This will remove all styling (the gradients and the default arrow icons). This isn't a big deal however, since you can just use css to apply more styling to it.
With the markup:
<select id="menulist">
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
</select>
And CSS:
#menulist {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
height:20px;
border:1px solid rgb(156,156,156);
width:250px;
text-indent: 8px;
/**
* replace this background url with a proper arrow asset
**/
background: url('http://placehold.it/5x10') no-repeat 95% 50%;
}
The full jsfiddle is available here: http://jsfiddle.net/gwwar/vR53Q/2/
Since this property is only supported on Chrome, Safari and Firefox, I would probably go a different route and either use the native select styling or use a dropdown component that you have full control over.
Related
On iOS (Safari 5) I have to following for input element (top inner shadow):
I want to remove top shadow, bug -webkit-appearance doesn't save.
Current style is:
input {
border-radius: 15px;
border: 1px dashed #BBB;
padding: 10px;
line-height: 20px;
text-align: center;
background: transparent;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
}
You'll need to use -webkit-appearance: none; to override the default IOS styles. However, selecting just the input tag in CSS will not override the default IOS styles, because IOS adds it's styles by using an attribute selector input[type=text]. Therefore your CSS will need to use an attribute selector to override the default IOS CSS styles that have been pre-set.
Try this:
input[type=text] {
/* Remove First */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/* Then Style */
border-radius: 15px;
border: 1px dashed #BBB;
padding: 10px;
line-height: 20px;
text-align: center;
background: transparent;
outline: none;
}
Helpful Links:
You can learn more about appearance here:
http://css-tricks.com/almanac/properties/a/appearance/
If you'd like to learn more about CSS attribute selectors, you can find a very informative article here:
http://css-tricks.com/attribute-selectors/
background-clip: padding-box;
Seems to remove the shadows as well.
As #davidpauljunior mentioned; be careful setting -webkit-appearance on a general input selector.
webkit will remove all properties
-webkit-appearance: none;
Try using the property box-shadow to remove the shadow on your input element
box-shadow: none !important;
Whilst the accepted answer is a good start, as others have pointed out, it only works for inputs whose type is "text". There are a myriad of other input types which also render as text boxes on iOS, and so we need to expand this rule to take into account these other types.
Here's the CSS I'm using to rid input text fields and textareas of the inner shadow, whilst preserving the default styling for buttons, checkboxes, range sliders, date/time dropdowns and radio buttons, all of which are authored using the humble <input> tag too.
textarea,
input:matches(
[type="email"],
[type="number"],
[type="password"],
[type="search"],
[type="tel"],
[type="text"],
[type="url"]
) {
-webkit-appearance: none;
}
I tried to come up with a solution that a.) works and b.) I am able to understand why it works.
I do know that the shadow for inputs (and the rounded border for input[type="search"]) comes from a background-image.
So obviously setting background-image: none was my first attempt, but this does not seem work.
Setting background-image: url() works, but i am still concerned about having a empty url(). Altough it currently is just a bad feeling.
background-clip: padding-box; seems to do the job as well, but even after reading the "background-clip" docs I don't get why this completly removes the background.
My favorite solution:
background-image: linear-gradient(transparent, transparent);
This is valid css and I do understand how it works.
This works better for me. Plus it means I don't have to apply it to every different type of input (i.e. text, tel, email, etc).
* {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
I'd like to change the blue background color from IE when a drop down is focused, but I can't seem to find any CSS to do this.
<select id=focusSelect><option>Option</option></select>
JS:
document.getElementById("focusSelect").focus();
CSS:
select:focus{
background-color: red;
}
http://jsfiddle.net/TafDD/3/
Specifically this is for when the drop down is not open. Styling the options is not a problem.
I also can't find any definitive answer on whether this is possible to do at all.
Setting the option background color also does not clear the blue color.
option {
background-color: green;
}
http://jsfiddle.net/srycroft/yE2Zg/
In Internet Explorer 11/Edge (not sure about previous versions) you can do this:
select:focus::-ms-value {
color: black;
background: red;
}
You should also specify the font color because it otherwise defaults to white (to originally contrast against the blue), so you'll want to override it too.
Here's a dabblet demo
Appreciate this is an oldish question, but to prevent the blue background on a selected option in a select dropdown in IE, use the MS pseudo element -ms-value as mentioned by WillRice above. Importantly though you need to set a color css attribute as well for the text as this will get defaulted to white.
select::-ms-value {
background: none; /* remove blue background on ie10/ie11 when selected*/
color:#000;
}
More info here
I'm using the CSS below and it is working in latest IE11, Edge, Firefox and Chrome (I have not tested it with earlier browsers). Just remove border-radius and padding if you don't need them. And thanks to willrice for his contribution:
select {
-webkit-appearance: none;
-moz-appearance: none;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding: 5px;
}
select:focus::-ms-value {
background: white;
color: black;
}
select::-ms-expand {
display: none;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding: 5px;
}
I've been fiddling around with css and javascript and have searched the internet to find a solution. Unfortunately it looks like it's not possible to change IE's blue highlight itself. In the following example I've used a combination of CSS an JS to achieve nearly the same result in ie as you have on http://jsfiddle.net/TafDD/3/ . Have a look at it.
An example is worth a thousand words: (tested in IE7)
<!DOCTYPE html>
<html>
<head>
<title>CSS Form Select Focus Color Change Test Page</title>
<style type="text/css">
/* Set the desired background color for the whole select element */
form select {
background-color: #fff;
}
form select option {
background: transparent;
}
/* Set the desired color for the focus state */
select:focus, select.focus {
background-color: #f00;
outline: none;
}
</style>
</head>
<body>
<form action="" method="POST">
<div id="selectWrap">
<select id="focusSelect" name="test_select">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div>
</form>
<!--[if lt IE 9]><script>
// NOTE: This is a pure JavaScript variant.
// You could also use something like jQuery.
var selectBox = document.getElementById('focusSelect');
// This will add the .focus class to the select
// giving it the defined background color
selectBox.onfocusin = function() {
this.className = 'focus';
};
// and this will restore the original background
// color by removing the .focus class
selectBox.onfocusout = function() {
this.className = '';
};
// This removes the blue highlight after an option is selected
selectBox.onchange = function() {
this.blur();
};
</script><![endif]-->
</body>
</html>
I hope this helps you.
I also recommend you have a look at:
jQuery.customSelect()
Style a Select Box Using Only CSS
DropKick.js
Custom Style All Your Form Elements with Pure CSS and No JavaScript
…and an overview of 40 Techniques:
Form Elements: 40+ CSS/JS Styling and Functionality Techniques
These sites will give you information on how to further style the select with css and / or javascript.
Have fun reading and happy coding!
I set the font-size for the dropdown in chrome, but it does not appear to change the size of the <select>
It works on FF - when i set the font-size as 15px, it is distinctively bigger
If Chrome and Safari just ignore your height, font-family and font-size CSS settings for select:
Adding a border attribute could help Webkits to respect your settings.
Example:
select {
border: 1px solid #a4a4a4; /*Same grey as default appearance*/
( background: transparent; /*Would work too, but adds an ugly black border*/ )
font-family: times; /*Now in webkit too*/
font-size: 30px; /*Now in webkit too*/
}
Another workaround is to style the <select> element with -webkit-appearance: menulist-button;.
select { -webkit-appearance: menulist-button; font-size: 25px; }
<select>
<option>A</option>
<option>BB</option>
<option>CCC</option>
</select>
Some browsers will allow you to modify the font-size on its own and some will not.
You can hack the browser-specific style of a select element by setting a border style.
select {
border: 1px solid #ccc;
font-size: 2em;
}
<select>
<option>Quick</option>
<option>Brown</option>
<option>Fox</option>
</select>
I have searched far and wide on the Internet but have not found anything helpful regarding how to style the dropdown portion of a dropdown list in a form. I would appreciate a pointer in the right direction. Thanks.
I've been working on the same problem for a while. Came up with a pretty simple solution using a holder div that is shorter then the dropdown itself. I also use a background image to get the dropdowns arrow to look the way I like. Check it out http://www.danielneumann.com/blog/how-to-style-dropdown-with-css-only/
All you need is a div around the select tag and 2 CSS classes.
HTML:
<div class="mainselection">
<select name="State" id="input7">
<option></option>
<option value="Alabama">Alabama</option>
...
<option value="Wisconsin">Wisconsin</option>
<option value="Wyoming">Wyoming</option>
</select>
</div>
CSS:
.mainselection {
overflow:hidden;
width:350px;
margin-left:35px;
background: url("images/dropdown_arrow.png") no-repeat #fff 319px 2px;
/* dropdown_arrow.png is a 31x28 image */
}
select {
border:0;
background:transparent;
height:32px;
border:1px solid #d8d8d8;
width:350px;
-webkit-appearance: none;
}
Then after a little Javascript verification, I can also switch the class on the div to .dropdownbad to give it a red border.
.dropdownbad {
border:2px solid #c13339;
}
The default and error states are shown here:
You can apply styles using the SELECT selector or applying a classname to a SELECT element. However, you'll run into issues with IE < 8 applying things like borders to the element.
You can then target options by using the OPTION selector.
SELECT { border: solid 1px red; font-weight: bold; }
OPTION { background:green; font-style: italic; }
Should give you a drop down with a red border (if using FF or IE8 in Standards mode) with bold text, and the options should be italic with a green background.
Check out this website for CSS only solution:
http://www.htmllion.com/default-select-dropdown-style-just-css.html
HTML:
<form>
<select>
<option>CSS</option>
<option>HTML </option>
<option>HTML 5</option>
</select>
</form>
CSS:
<style>
select {
border: 0 !important; /*Removes border*/
-webkit-appearance: none; /*Removes default chrome and safari style*/
-moz-appearance: none; /* Removes Default Firefox style*/
background: #0088cc url(img/select-arrow.png) no-repeat 90% center;
width: 100px; /*Width of select dropdown to give space for arrow image*/
text-indent: 0.01px; /* Removes default arrow from firefox*/
text-overflow: ""; /*Removes default arrow from firefox*/ /*My custom style for fonts*/
color: #FFF;
border-radius: 15px;
padding: 5px;
box-shadow: inset 0 0 5px rgba(000,000,000, 0.5);
}
</style>
Its possible, but convoluted to say the least. You can't actually style the drop down portion of a drop down list consistantly across different browsers as they all support them in different ways (I mean really varied support).
When I had a problam like this a few months ago, the only solution I found was to, using javascript, convert the drop down list into a ul/li drop down menu, which I could style. Of course there are numerous event that need handling, like selecting a value.
Luckly there's a plugin for JQuery that allows this be a trivial task. (The given Brainfault link for this plugin isn't working anymore.)
As mentioned above it's pretty much impossible to do using straight html, I have had good results with jQuery Combobox though.
Since this question was asked, browser technology has far improved. You can now create a custom dropdown menu entirely using CSS with no javascript.
Check out this blog post:
http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu
I have dropdowns in my cart that were light gray if not selected. I was able to turn the text black with this:
#customer_details ul {
color: black !important;
}
That was all I needed to change, so I can't say what else you could do.
First question...
I'm having trouble getting ANY of the Drop down menu/Input Select's to appear with size 18 font in Safari.
Works fine in FF.
Code:
<form class="form">
<select name="make">
<option value="0"> All</option>
</select>
</form>
Css:
.form input{
font-size:18px;
margin-bottom:0px;
}
Any ideas? Can view live at [http://www.motolistr.com][1]
Best,
Nick
EDIT 1:
Thanks for the quick reply. I added a style to the select itself to avoid confusion. I tried;
<select name='make' style='font-size: 18pt;'>
</select>
And
<select name='make' style='font-size: 18px;'>
</select>
And
<select name='make' style='font-size: 1.3em;'>
</select>
Still not working in SAFARI...Again FF works fine with all 3.
Best,
Nick
To style a select in Safari you first have to turn off the os styling:
select {
-webkit-appearance: none;
}
Funny thing though: If you change the background- or border-properties on your select Safari will all of a sudden also apply your font-size.
I figured out a way that safari will pick up on font-size ... all you need to do is set a border color, like the following.
-webkit-appearance: none; will make you lose all of safari's attributes, like the arrows... below you can increase the size without losing that.
Will Work in Safari
<select style=" font-size: 3em; border: black;">
<option>TEXT</option>
</select>
Won't Work in Safari
<select style=" font-size: 3em;">
<option>TEXT</option>
</select>
It appers select controls are non-stylable in Safari; it always uses its own OS X-style widget drawing routines to display them. Until recently, this was the norm: browsers would typically use plain OS-provided widgets for form fields. CSS2 doesn't really say how styles should apply to form fields (if at all).
Some browsers today apply the select's font style to the options (IE7, Opera); some allow the on-page select and the pop-up options to be styled differently (Mozilla, Chrome), so the best you can do for consistency is:
.form select, .form option {
font: Whatever 18px;
}
But if you absolutely need a stylable drop-down in Safari you will need to write your own clunky ersatz-select in JavaScript. (Or see one of the many existing scripts and framework plugins that do this.)
First off this
.form input{
font-size:18px;
margin-bottom:0px;
}
will not work because you are not styling the select element you are styling input elements. Try this and it will most likely work.
.form select {
font-size:18px;
margin-bottom:0px;
}
At least in Safari 5.1 (I don't have 3 running anymore) you can turn off the default styling with:
select{-webkit-appearance: none}
Then it will conform to your font sizing.
The select technically isn't an input tag. Try assigning a class to your select and set the style for the class.
EDIT: Turns out that Aqua style selects only have three different font sizes available. If you need to set an exact font size, you can turn off Aqua by giving the item a background color, then set the size. FYI, it appears that 20px works without setting the background so it must size up to the next supported Aqua size.
Reference: http://particletree.com/notebook/design-friendly-select-elements-in-safari-3/. Test page with various styles at http://particletree.com/examples/safari3/drop.html.
<select name='make' class='big-input'>
</select>
.big-input
{
background: #fff; // turns off Aqua
font-size: 18pt; // assuming you meant 18pt, not 18px
margin-bottom: 0px;
}
Setting line-height:100% will constrain the height of the select box for a more consistent look, but it still doesn't affect the actual font size.
In some cases it can help:
select {
-webkit-appearance: menulist-button;
font-size: 30px;
}
I found a way of changing the font size of a select element in Safari through the use of percentages.
Your code then becomes:
<select name='make' style='font-size: 120%;'></select>
For a 13px font size (which I found very appealing).
This is tested in Safari 5.1.3
You can target Safari select tag by doing this:
select {
width: 224px;
line-height: 1.8; (This can be in px too)
}
try this
<style>
select { border:0; color:#000000; background:transparent;
font-size:20px; font-weight:bold; padding:2px 10px; width:378px;
*width:350px; *background:#FFFFFF; -webkit-appearance: none; }
#mainselection { overflow:hidden; width:350px;
-moz-border-radius: 9px 9px 9px 9px;
-webkit-border-radius: 9px 9px 9px 9px;
border-radius: 9px 9px 9px 9px;
box-shadow: 1px 1px 11px #330033;
background: url("img/arrow.gif") no-repeat scroll 319px 5px #FFFFFF;
}
</style>