Following this answer https://stackoverflow.com/a/17713753/407943
I've tried implementing the same solution but it does not work on my Windows 7 Firefox 22, this is what I get:
select {
-moz-appearance: window;
-webkit-appearance: none;
background: #f5f5f5 url("/images/arrow_down.png") right center no-repeat;
padding-right: 20px;
}
#-moz-document url-prefix() {
.wrapper {
background: #f5f5f5 url("/images/arrow_down.png") right center no-repeat;
padding-right: 20px;
}
}
EDIT: here's a jsfiddle http://jsfiddle.net/TGBEZ/1/
Update: this trick stopped working as of FF 30. No other fix so far. Keep your eyes on the full gist for updates.
How to remove the <select> arrow on Firefox:
-moz-appearance:none; doesn't work by itself. You need to add some text-indent and text-overflow. Like this:
select {
-moz-appearance: none;
text-indent: 0.01px;
text-overflow: '';
}
Live example: http://jsfiddle.net/joaocunha/RUEbp/1/
Learn the details on this gist: https://gist.github.com/joaocunha/6273016
This is a known bug of firefox which won't be corrected soon, or maybe even later (see this bugzilla).
There is a pure CSS/HTML workaround :
HTML :
<div class="styled">
<select></select>
</div>
CSS :
div.styled {
overflow: hidden;
padding: 0;
margin: 0;
}
div.styled select {
width: 115%;
background-color: rgba(0, 0, 0, 0);
background-image: none;
-webkit-appearance: none;
border: none;
}
The Fiddle
The problem here is that you will have to make sure the text won't be too large, otherwise it will get over the image.
Also, there are javascript solutions. Take a look at customselect, a jQuery plugin to easily create your own selects.
Another famous plugin : chosen
This is the only solution that really worked for me on FF/IE/Chrome:
Customized select dropdown arrow not clickable
Using -moz-appearance: window instead of none seems to be working now in FF 30
I have this working in Firefox 30+ with:
-moz-appearance: textfield;
Related
This hack used to work in <= Firefox 29 to remove a <select> arrow:
text-overflow: '';
text-indent: 0.01px;
-moz-appearance: none;
It no longer works in Firefox 30. Arrow is back.
Codepen for hack that works in Firefox 29
Related bug (now fixed in Fx 35b)
Does anyone know a way to achieve the same effect?
Note1: I'm not interested in solutions that overlay the arrow with another element, or solutions that nest the select element and do a overflow:hidden.
Note2: I tried all -moz-appearance possibilities. They either add default styling I cannot override, don't allow custom styling (border and background, specifically), or the arrow is still visible.
Update: it works again in Firefox 35 (currently in beta) using -moz-appearance: none, making this look consistent in all latest browsers (Tested in IE11, Firefox 35b, Chrome 39, Safari 8): http://jsfiddle.net/phd5pu9x/
I fixed my this issue by giving some style to div and select individually.
Anyone can change his width and other style properties a/c to needs. :)
Here is the js fiddle for it. JSFIDDLE
<div class="common-dropdown-small-div" style="width: 220px">
<select id="select" class="common-dropdown-project-select">
<option>
apple
</option>
<option>
blackberry
</option>
<option>
pumpkin
</option>
</select>
.common-dropdown-small-div{
border: 1px solid rgb(208, 208, 208);
overflow: hidden;
width: 220px; }
.common-dropdown-project-select{
width: 100% !important;
background-image: url("http://upload.wikimedia.org/wikipedia/en/f/f1/Down_Arrow_Icon.png");
background-position: 97% 60%, 0 0 ! important;
background-repeat: no-repeat;
background-size: 25px 16px;
border: none ! important;
outline : medium none !important;
display: inline-flex !important;
height: 33px !important;
vertical-align: top;
-webkit-appearance: none; }
select::-ms-expand {
display: none;}
Put the select in another container which has overflow: hidden;, make the select wider than the container. If you want a border, add it to the container.
An example is the select at the bottom of this page:
https://mozillians.org/en-US/
You can use this solution for firefox, using vendor pseudo class :-moz-any() and pointer events only for mozilla and do not affect other browsers, because both is valid since version 3.6.
here is a jsbin example http://jsbin.com/pozomu/4/edit
/* For mozilla Firefox 30.0+ I used the following to coverup the reappearing arrow: */
#-moz-document url-prefix() {
.yourClass:after {
position: absolute;
margin-left: -25px;
border-radius: 4px;
content: url('../images/pathToYourDownArrowImage.svg');
pointer-events: none;
overflow: hidden;
}
/* I still use this to move the text over */
.yourClass select {
text-overflow: '';
text-indent: -1px;
-moz-appearance: none;
background: none;
}
}
Firefox > 29 -moz-appearance:none; working, But have a problem with width, we extend the width of select from 100 to 110% to hide, but it affects the design of a forms, So i just hide it with a div and over come it,
Check the codepen version
http://codepen.io/ssbalakumar/pen/jgLEq
As #mircea c alluded to ...
If your HTML looks like this:
<div class="styled-select">
<select>
<option>Here is the first option</option>
<option>The second option</option>
<option>The thrid option</option>
</select>
</div>
Then you can remove the dropdown arrow in Firefox 30+
.styled-select {
overflow: hidden;
width: 200px;
}
#-moz-document url-prefix(){
.styled-select select { width: 110%; }
}
Working demo: codepen
FYI: The same technique works in IE 8 & 9, just use a conditional comment instead of #-moz-document url-prefix()
I can't change select height, with all browser working fine, but Safari no, where can be problem? Also I try make class .style select, but not working.
select {
width: 170px;
height: 25px;
}
Try adding this:
-webkit-appearance: menulist-button;
To style a select in Safari, you first have to turn off the os styling:
-webkit-appearance: none;
You can also use
line-height: 25px
which doesn't affect other browsers, but fixes this bug in Safari
The best way use modernizer detector and give safari class select menu a
line-height: 20px;
or you can use jquery UI select menu to solve this by another cross-browser wy.
#media screen and (-webkit-min-device-pixel-ratio:0) {
select {
-webkit-appearance: menulist-button !important;
line-height:24px !important;
}
}
This code ensures the same height across browsers.
at least on iPad the select is not rendered for padding or line-height but instead will render given height and center vertically the value
select {
-webkit-appearance:menu-item; // or menulist-button
-moz-appearance:menu-item;
height:2.4em; // this must be calculated to match other input types
}
input[type="text"], select {
min-width:12em;
border-radius:5px;
}
the only thing unresolved now is background which is predefined and imutable
Nothing worked for me until I used inline style:
<select name="pickupsel" id="pickups" style="line-height:33px">
Somehow Safari (latest Windows version, 5.1.7) doesn't read this style property from CSS file.
#media screen and (-webkit-min-device-pixel-ratio:0) { select { -webkit-appearance: menulist-button !important; line-height:24px !important; } }
Give line-height according your requirement.
This is how I am solving this in 2022:
select, input {
font-size: 14px; //or whatever
height: 3em;
line-height: 3em;
padding: 0; //top and bottom must be 0
-webkit-appearance: none;
}
This is how I am solving this in 2022:
select {
background-color: inherit;
}
I can't figure this one out. I'm trying to get rid of that blue glow when textarea is highlighted in Firefox.
Here's my CSS:
textarea
{
margin:0;
padding:0;
width: 598px;
height: 600px;
resize: none;
outline: none;
}
:focus {
outline:0;
outline:none;
}
It removes it in Safari, but I'm have no luck with Firefox.
Thanks!
Matt
how about
*:focus {outline:0px none transparent;}
You can remove it with -moz-appearance:none;, though that may affect the whole appearance more than you're wanting.
If you use this on the textarea style:
outline:none;
... it should work with all browsers, not just Firefox
I'm fairly sure that's a Mac OS X theme-specific behaviour.
Just add or define a border... for instance, if a border is defined and I've added outline: none; to my CSS, this does the trick.
I just had an issue with this on a text input- Firefox was using the border property to create the blue glow on :focus - not outline.
input:focus, textarea:focus {
outline: none; // for other browsers
border: none; // only necessary if you haven't set a border on the element
}
You cannot remove the glow in Firefox I think.. Only way to do that would be by adding a custom border to your element, like border: 1px black;, that would make the input box have no glow at all.
Only popular browsers which allows the outline tag are Safari and Chrome (not sure about linux browsers).
on #3
#Solution0:focus{
border:solid #CCC 1px;
outline:1px none transparent;
}
The better way to fix this, in my opinion, is define a custom border and :focus behavior.
textarea {
margin:0;
padding:0;
width: 598px;
height: 600px;
resize: none;
outline: none;
border: none;
}
textarea:focus {
outline: none;
border: none;
}
Slightly unrelated but possibly helpful answer: In my case the blue glow was causing an alignment problem in Firefox only since it adds an extra pixel or two and changes the overall element size. My guess is a lot of people will arrive at this question for similar reasons and rather than remove the blue glow altogether, the solution I came to was to style the input element padding in specifically for Firefox:
#-moz-document url-prefix() {
input:focus {
padding: 5px!important;
}
}
You can change this to suite your needs but it may be helpful for some of you to know about the #-moz-document url-prefix() rule.
I found this code from here: http://www.cssportal.com/form-elements/text-box.htm
But the problem is you can still see the rectangular shape of the textbox whenever you click inside it. What would be the fix for this? So that the highlight will go with the image with rounded corners
/* Rounded Corner */
.tb5 {
background: url(images/rounded.gif) no-repeat top left;
height: 22px;
width: 230px;
}
.tb5a {
border: 0;
width:220px;
margin-top:3px;
}
This should only occur in some browsers such as Google Chrome, it is meant to help with usability and accessibility but it can cause issues with some styling. What you want to do is remove the dynamic outlines like this:
input[type="text"] {
outline: none;
}
In addition, you can try highlighting the text box still by including a background image change using a psedo-selector like :focus
input[type="text"]:focus {
background: url(images/rounded-focused.gif) no-repeat top left;
}
I want to use an image for the background of a select/dropdown. The following CSS works fine in Firefox and IE, but does not in Chrome:
#main .drop-down-loc { width:506px; height: 30px; border: none;
background-color: Transparent;
background: url(images/text-field.gif) no-repeat 0 0;
padding:4px; line-height: 21px;}
select
{
-webkit-appearance: none;
}
If you need to you can also add an image that contains the arrow as part of the background.
What Arne said - you can't reliably style select boxes and have them look anything like consistent across browsers.
Uniform: https://github.com/pixelmatrix/uniform is a javascript solution which gives you good graphic control over your form elements - it's still Javascript, but it's about as nice as javascript gets for solving this problem.
Generally, it's considered a bad practice to style standard form controls because the output looks so different on each browser. See: http://www.456bereastreet.com/lab/styling-form-controls-revisited/select-single/ for some rendered examples.
That being said, I've had some luck making the background color an RGBA value:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: #d00;
}
select {
background: rgba(255,255,255,0.1) url('http://www.google.com/images/srpr/nav_logo6g.png') repeat-x 0 0;
padding:4px;
line-height: 21px;
border: 1px solid #fff;
}
</style>
</head>
<body>
<select>
<option>Foo</option>
<option>Bar</option>
<option>Something longer</option>
</body>
</html>
Google Chrome still renders a gradient on top of the background image in the color that you pass to rgba(r,g,b,0.1) but choosing a color that compliments your image and making the alpha 0.1 reduces the effect of this.
You can use the CSS styles below for all browsers except Firefox 30:
select {
background: url(dropdown_arw.png) no-repeat right center;
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
width: 90px;
text-indent: 0.01px;
text-overflow: "";
}
Updated
Here is a solution for Firefox 30. There is a little trick for custom select elements in firefox :-moz-any() CSS pseudo class.