CSS Buttons on different platforms - html

CSS Buttons when viewed on windows desktop or apple mac have a default background color of grey (#DDD) but when viewed on ios mobile, the default background color is transparent. This can be fixed by manually adding css background color as #DDD but still why does this happen? Any Ideas?

They look different because browsers have different renderings of CSS.
I recommend to use -webkit and -moz to avoid this type of problem.
.btn{
-webkit-background-color: #DDD;
-moz-background-color: #DDD;
background-color: #DDD;
}

Different browsers have different styles for buttons, select dropdown, input file upload buttons.
These styles are taken from the default stylesheets present in the browser.
In order to avoid these default stylings, you have to reset the styles using CSS reset stylesheets like Normalize CSS, Meyers CSS reset.
Reset for button only
button {
border: none;
margin: 0;
padding: 0;
width: auto;
overflow: visible;
background: transparent;
/* inherit font & color from ancestor */
color: inherit;
font: inherit;
/* Normalize `line-height`. Cannot be changed from `normal` in Firefox 4+. */
line-height: normal;
/* Corrects font smoothing for webkit */
-webkit-font-smoothing: inherit;
-moz-osx-font-smoothing: inherit;
/* Corrects inability to style clickable `input` types in iOS */
-webkit-appearance: none;
}
/* Remove excess padding and border in Firefox 4+ */
&::-moz-focus-inner {
border: 0;
padding: 0;
}

Related

Website elements reposition viewed through safari, works on other browsers

Links below are accurate and match up with attached images. Reproduction is possible as described below.
I am developing a website using HTML, CSS, and JavaScript: https://github.com/nkozlo3/PortfolioWebsite.git
Website: https://nkozlo3.github.io/PortfolioWebsite/
The website looks correct on Chrome, Firefox, and Microsoft Edge. Also on laptops of different sizes: Chrome view 1 Microsoft Edge view 1
Firefox view is the same.
But when viewed through Safari, the elements reposition themselves like so:
Safari view 1
To reproduce the problem simply visit the website on Safari through the above link or pull the code from my GitHub (link above) and run it through Safari.
I tried putting this wrapper around the body of my HTML
<div id="wrapper" style="margin-left: auto; margin-right: auto; width: 960px">
and adding this meta tag
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
I was expecting this to force the content to stay in the correct spots across devices and websites, but it did not solve the issue on Safari.
I also tried adding the below reset.css file to my style.css file to normalize across different browsers. This also did not solve the issue on Safari:
/***
The new CSS reset - version 1.8.2 (last updated 23.12.2022)
GitHub page: https://github.com/elad2412/the-new-css-reset
***/
/*
Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property
- The "symbol *" part is to solve Firefox SVG sprite bug
*/
*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {
all: unset;
display: revert;
}
/* Preferred box-sizing value */
*,
*::before,
*::after {
box-sizing: border-box;
}
/* Reapply the pointer cursor for anchor tags */
a, button {
cursor: revert;
}
/* Remove list styles (bullets/numbers) */
ol, ul, menu {
list-style: none;
}
/* For images to not be able to exceed their container */
img {
max-inline-size: 100%;
max-block-size: 100%;
}
/* removes spacing between cells in tables */
table {
border-collapse: collapse;
}
/* Safari - solving issue when using user-select:none on the <body> text input doesn't working */
input, textarea {
-webkit-user-select: auto;
}
/* revert the 'white-space' property for textarea elements on Safari */
textarea {
white-space: revert;
}
/* minimum style to allow to style meter element */
meter {
-webkit-appearance: revert;
appearance: revert;
}
/* preformatted text - use only for this feature */
pre {
all: revert;
}
/* reset default text opacity of input placeholder */
::placeholder {
color: unset;
}
/* remove default dot (•) sign */
::marker {
content: "";
}
/* fix the feature of 'hidden' attribute.
display:revert; revert to element instead of attribute */
:where([hidden]) {
display: none;
}
/* revert for bug in Chromium browsers
- fix for the content editable attribute will work properly.
- webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/
:where([contenteditable]:not([contenteditable="false"])) {
-moz-user-modify: read-write;
-webkit-user-modify: read-write;
overflow-wrap: break-word;
-webkit-line-break: after-white-space;
-webkit-user-select: auto;
}
/* apply back the draggable feature - exist only in Chromium and Safari */
:where([draggable="true"]) {
-webkit-user-drag: element;
}
/* Revert Modal native behavior */
:where(dialog:modal) {
all: revert;
}

How to remove the dotted white border around focused button text

I need to, but cannot, remove the white dotted border around the text of a focused button.
After reading articles about "remove white border (especially Dotted border around link? and links inside), I have try several solutions of disabling outline like "outline: 0; or outline: none;, using or not !important.
But nothing does remove the dotted white border around the text of a focused button.
Here is my simplest test page code. I cannot show a screenshot, because it removes the focus from the button.
button {
font-size: 87.5%;
font-family: "ubuntu", Sans-serif;
padding: 0 16px;
min-width: 64px;
height: 36px;
cursor: pointer;
background-color: royalblue;
color: white;
border: 0;
}
button:focus,
button:active {
outline: none;
outline: 0;
outline: none !important;
outline: 0 !important;
}
<button type="button">TEST</button>
Using Firefox 67.0.3 on Ubuntu 18.04 (Bionic Beaver), this page still shows a dotted white border around focused button text, which I'd like to remove (I'll show the focus with a method of my own).
These styles are declared at the UA level, so each browser has their own implementation (and in Firefox case, pseudo elements for targeting them).
In Firefox, you can use the ::-moz-focus-inner pseudo element:
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner {
border: none;
}
You need to add setback for different browsers, for example:
button:focus,
button:active {
-moz-outline: 0;
-ms-outline:0;
-o-outline: 0;
-webkit-outline: 0;
}
These are the vendor-prefixed properties offered by the relevant rendering engines (-webkit for Chrome, Safari; -moz for Firefox, -o for Opera, -ms for Internet Explorer). Typically they're used to implement new, or proprietary CSS features, prior to final clarification/definition by the W3.
Just set border: 0 , I have updated your code try this it will work!
<input type="button" value="text">
And in style tag just use this:-
input[type="button"]::-moz-focus-inner {
border: 0
}
a::-moz-focus-inner did not work for me in a situation where a React Router redirect was inexplainably causing focus borders. The selector itself did not activate.
Temporarily solved with (but not happy with):
a::-moz-focusring {
outline: none;
}

hyperlink (anchor) button with background color on IE 8 not working

I trying to style background colour of hyperlink button "" and it works fine on Chrome, IE9, Firefox etc except IE 8. After further investigation i found that IE8 does not support css like button:not(.t-button) and it breaks
I wanted to know if i need to add a different css for IE 8 on a different file or i can update the syntax so it does not break for IE 8.
button:not(.t-button), .btn, a.btn, input[type="button"], input[type="submit"] {
display: inline-block;
padding: 0px 10px;
border: none;
margin: 6px 0 0;
height: 24px;
background-color: rgb(64,141,198);
font-family: 'Arial' ,sans-serif;
font-weight: bold;
font-size: 1em; /* 12 */
line-height: 2em;
color: rgb(255,255,255);
cursor: pointer;
box-shadow: none;
-webkit-appearance: none;
}
Here is the jsFiddle like http://jsfiddle.net/786wF/
Any help will be highly appreciated.
Regards
Bhavesh
First :not pseudo selector is NOT supported
More info :
http://kimblim.dk/css-tests/selectors/
http://caniuse.com/#search=%3Anot
Second, your html is NOT valid, putting div inside anchors
Replace your inner DIV with SPAN
IE will apreciate
Third : jsfiddle does NOT support IE < 8
your code structure is not valid in w3c validator because you put your div inside an element.try changing your div into other element like span.and do not use the:not pseudo element

How to remove the arrow from a select element in Firefox

I'm trying to style a select element using CSS3. I'm getting the results I desire in WebKit (Chrome / Safari), but Firefox isn't playing nicely (I'm not even bothering with IE). I'm using the CSS3 appearance property, but for some reason I can't shake the drop-down icon out of Firefox.
Here's an example of what I'm doing: http://jsbin.com/aniyu4/2/edit
#dropdown {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
background: transparent url('example.png') no-repeat right center;
padding: 2px 30px 2px 2px;
border: none;
}
As you can see, I'm not trying for anything fancy. I just want to remove the default styles and add in my own drop-down arrow. Like I said, great in WebKit, not great in Firefox. Apparently, the -moz-appearance: none doesn't get rid of the drop-down item.
Any ideas? No, JavaScript is not an option
Update: this was fixed in Firefox v35. See the full gist for details.
Just figured out how to remove the select arrow from Firefox. The trick is to use a mix of -prefix-appearance, text-indent and text-overflow. It is pure CSS and requires no extra markup.
select {
-moz-appearance: none;
text-indent: 0.01px;
text-overflow: '';
}
Tested on Windows 8, Ubuntu and Mac, latest versions of Firefox.
Live example: http://jsfiddle.net/joaocunha/RUEbp/1/
More on the subject: https://gist.github.com/joaocunha/6273016
Okay, I know this question is old, but 2 years down the track and mozilla have done nothing.
I've come up with a simple workaround.
This essentially strips all formatting of the select box in firefox and wraps a span element around the select box with your custom style, but should only apply to firefox.
Say this is your select menu:
<select class='css-select'>
<option value='1'> First option </option>
<option value='2'> Second option </option>
</select>
And lets assume the css class 'css-select' is:
.css-select {
background-image: url('images/select_arrow.gif');
background-repeat: no-repeat;
background-position: right center;
padding-right: 20px;
}
In firefox, this would display with the select menu, followed by the ugly firefox select arrow, followed by your nice custom looking one. Not ideal.
Now to get this going in firefox, add a span element around with the class 'css-select-moz':
<span class='css-select-moz'>
<select class='css-select'>
<option value='1'> First option </option>
<option value='2'> Second option </option>
</select>
</span>
Then fix the CSS to hide mozilla's dirty arrow with -moz-appearance:window and throw the custom arrow into the span's class 'css-select-moz', but only get it to display on mozilla, like this:
.css-select {
-moz-appearance:window;
background-image: url('images/select_arrow.gif');
background-repeat: no-repeat;
background-position: right center;
padding-right: 20px;
}
#-moz-document url-prefix() {
.css-select-moz{
background-image: url('images/select_arrow.gif');
background-repeat: no-repeat;
background-position: right center;
padding-right: 20px;
}
}
Pretty cool for only stumbling across this bug 3 hours ago (I'm new to webdesign and completely self-taught). However, this community has indirectly provided me with so much help, I thought it was about time I give something back.
I have only tested it in firefox (mac) version 18, and then 22 (after I updated).
All feedback is welcome.
The trick that works for me is to
make select width more than 100% and apply overflow:hidden
select {
overflow:hidden;
width: 120%;
}
This is the only way right now to hide dropdown arrow in FF.
BTW. if you want beautiful dropdowns use http://harvesthq.github.com/chosen/
Important Update:
As of Firefox V35 the appearance property now works !!
From firefox's official release notes on V35:
Using -moz-appearance with the none value on a combobox now remove
the dropdown button (bug 649849).
So now in order to hide the default arrow - it's as easy as adding the following rules on our select element:
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
DEMO
select {
margin: 50px;
border: 1px solid #111;
background: transparent;
width: 150px;
padding: 5px;
font-size: 16px;
border: 1px solid #ccc;
height: 34px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
<select>
<option>Apples</option>
<option selected>Pineapples</option>
<option>Chocklate</option>
<option>Pancakes</option>
</select>
We've found a simple and decent way to do this. It's cross-browser,degradable, and doesn't break a form post. First set the select box's opacity to 0.
.select {
opacity : 0;
width: 200px;
height: 15px;
}
<select class='select'>
<option value='foo'>bar</option>
</select>
this is so you can still click on it
Then make div with the same dimensions as the select box. The div should lay under the select box as the background. Use { position: absolute } and z-index to achieve this.
.div {
width: 200px;
height: 15px;
position: absolute;
z-index: 0;
}
<div class='.div'>{the text of the the current selection updated by javascript}</div>
<select class='select'>
<option value='foo'>bar</option>
</select>
Update the div's innerHTML with javascript. Easypeasy with jQuery:
$('.select').click(function(event)) {
$('.div').html($('.select option:selected').val());
}
That's it! Just style your div instead of the select box. I haven't tested the above code so you'll probably need tweak it. But hopefully you get the gist.
I think this solution beats {-webkit-appearance: none;}. What browsers should do at the very most is dictate interaction with form elements, but definitely not how their initially displayed on the page as that breaks site design.
Try this way:
-webkit-appearance: button;
-moz-appearance: button;
Then, you can use a different image as background and place it:
background-image: url(images/select-arrow.png);
background-position: center right;
background-repeat: no-repeat;
There is another way for moz browsers:
text-indent:10px;
If you have a defined a width to you select, this property will push the default dropbox button under the select area.
It works for me! ;)
While not a complete solution I've found that…
-moz-appearance: window;
…works to some extent. You can't change the background (-color or -image) but the element can be rendered invisible with color: transparent. Not perfect but it's a start and you don't need to replace the system level element with a js one.
I think I found the solution compatible with FF31!!!
Here are two options that are well explained at this link:
http://www.currelis.com/hiding-select-arrow-firefox-30.html
I used option 1:
Rodrigo-Ludgero posted this fix on Github, including an online demo. I tested this demo on Firefox 31.0 and it appears to be working correctly. Tested on Chrome and IE as well. Here is the html code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Custom Select</title>
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="custom-select fa-caret-down">
<select name="" id="">
<option value="">Custom Select</option>
<option value="">Custom Select</option>
<option value="">Custom Select</option>
</select>
</div>
</body>
</html>
and the css:
.custom-select {
background-color: #fff;
border: 1px solid #ccc;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0 0 2em;
padding: 0;
position: relative;
width: 100%;
z-index: 1;
}
.custom-select:hover {
border-color: #999;
}
.custom-select:before {
color: #333;
display: block;
font-family: 'FontAwesome';
font-size: 1em;
height: 100%;
line-height: 2.5em;
padding: 0 0.625em;
position: absolute;
top: 0;
right: 0;
text-align: center;
width: 1em;
z-index: -1;
}
.custom-select select {
background-color: transparent;
border: 0 none;
box-shadow: none;
color: #333;
display: block;
font-size: 100%;
line-height: normal;
margin: 0;
padding: .5em;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.custom-select select::-ms-expand {
display: none; /* to ie 10 */
}
.custom-select select:focus {
outline: none;
}
/* little trick for custom select elements in mozilla firefox 17/06/2014 #rodrigoludgero */
:-moz-any(.custom-select):before {
background-color: #fff; /* this is necessary for overcome the caret default browser */
pointer-events: none;
z-index: 1; /* this is necessary for overcome the pseudo element */
}
http://jsbin.com/pozomu/4/edit
It works very good for me!
Unfortunately for you this is "something fancy". Normally it's not the web authors place to redesign form elements. Many browsers purposely don't let you style them, in order for the user to see the OS controls they are used to.
The only way to do this consistently over browsers and operating systems, is use JavaScript and replace the select elements with "DHTML" ones.
Following article show three jQuery based plugins that allow you to do that (it is a bit old, but I couldn't find anything current right now)
http://www.queness.com/post/204/25-jquery-plugins-that-enhance-and-beautify-html-form-elements#1
/* Try this in FF30+ Covers up the arrow, turns off the background */
/* still lets you style the border around the image and allows selection on the arrow */
#-moz-document url-prefix() {
.yourClass select {
text-overflow: '';
text-indent: -1px;
-moz-appearance: none;
background: none;
}
/*fix for popup in FF30 */
.yourClass:after {
position: absolute;
margin-left: -27px;
height: 22px;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
content: url('../images/yourArrow.svg');
pointer-events: none;
overflow: hidden;
border-right: 1px solid #yourBorderColour;
border-top: 1px solid #yourBorderColour;
border-bottom: 1px solid #yourBorderColour;
}
}
I am styling the select just likes this
<select style=" -moz-appearance: radio-container;
-webkit-appearance: none;
appearance: none;
">
It works for me in FF, Safari and Chrome in all versions I've tested.
In IE I put:
select::-ms-expand {
display: none;
}
/*to remove in all selects*/
Also you can:
.yourclass::-ms-expand {display: none;
}
.yourid::-ms-exapan {display: none;
}
I know this question is a bit old, but since it turns up on google, and this is a "new" solution:
appearance: normal Seems to work fine in Firefox for me (version 5 now). but not in Opera and IE8/9
As a workaround for Opera and IE9, I used the :before pseudoselector to create a new white box and put that on top of the arrow.
Unfortunately, In IE8 this doesn't work. The box is rendered correctly, but the arrow just sticks out anyway... :-/
Using select:before works fine in Opera, but not in IE. If I look at the developer tools, I see it is reading the rules correctly, and then just ignores them (they're crossed out). So I use a <span class="selectwrap"> around the actual <select>.
select {
-webkit-appearance: normal;
-moz-appearance: normal;
appearance: normal;
}
.selectwrap { position: relative; }
.selectwrap:before {
content: "";
height: 0;
width: 0;
border: .9em solid red;
background-color: red;
position: absolute;
right: -.1em;
z-index: 42;
}
You may need to tweak this a bit, but this works for me!
Disclaimer:
I'm using this to get a good looking hardcopy of a webpage with forms so I don't need to create a second page. I'm not a 1337 haxx0r who wants red scrollbars, <marquee> tags, and whatnot :-) Please do not apply excessive styling to forms unless you have a very good reason.
Use the pointer-events property.
The idea here is to overlay an element over the native drop down arrow (to create our custom one) and then disallow pointer events on it. [see this post]
Here is a working FIDDLE using this method.
Also, in this SO answer I discussed this and another method in greater detail.
This works (tested on Firefox 23.0.1):
select {
-moz-appearance: radio-container;
}
building on the answer by #JoãoCunha, one css style that is usefull for more then one browser
select {
/*for firefox*/
-moz-appearance: none;
/*for chrome*/
-webkit-appearance:none;
text-indent: 0.01px;
text-overflow: '';
}
/*for IE10*/
select::-ms-expand {
display: none;
}
Further to Joao Cunha's answer, this problem is now on Mozilla's ToDo List and is targeted for ver 35.
For those desiring, here is a workaround by Todd Parker, referenced on Cunha's blog, that works today:
http://jsfiddle.net/xvushd7x/
HTML:
<label class="wrapper">This label wraps the select
<div class="button custom-select ff-hack">
<select>
<option>Apples</option>
<option>Bananas</option>
<option>Grapes</option>
<option>Oranges</option>
<option>A very long option name to test wrapping</option>
</select>
</div>
</label>
CSS:
/* Label styles: style as needed */
label {
display:block;
margin-top:2em;
font-size: 0.9em;
color:#777;
}
/* Container used for styling the custom select, the buttom class below adds the bg gradient, corners, etc. */
.custom-select {
position: relative;
display:block;
margin-top:0.5em;
padding:0;
}
/* These are the "theme" styles for our button applied via separate button class, style as you like */
.button {
border: 1px solid #bbb;
border-radius: .3em;
box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
background: #f3f3f3; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* IE10+ */
background: linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%); /* W3C */
}
/* This is the native select, we're making everything but the text invisible so we can see the button styles in the wrapper */
.custom-select select {
width:100%;
margin:0;
background:none;
border: 1px solid transparent;
outline: none;
/* Prefixed box-sizing rules necessary for older browsers */
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
/* Remove select styling */
appearance: none;
-webkit-appearance: none;
/* Font size must the 16px or larger to prevent iOS page zoom on focus */
font-size:16px;
/* General select styles: change as needed */
font-family: helvetica, sans-serif;
font-weight: bold;
color: #444;
padding: .6em 1.9em .5em .8em;
line-height:1.3;
}
/* Custom arrow sits on top of the select - could be an image, SVG, icon font, etc. or the arrow could just baked into the bg image on the select. Note this si a 2x image so it will look bad in browsers that don't support background-size. In production, you'd handle this resolution switch via media query but this is a demo. */
.custom-select::after {
content: "";
position: absolute;
width: 9px;
height: 8px;
top: 50%;
right: 1em;
margin-top:-4px;
background-image: url(http://filamentgroup.com/files/select-arrow.png);
background-repeat: no-repeat;
background-size: 100%;
z-index: 2;
/* These hacks make the select behind the arrow clickable in some browsers */
pointer-events:none;
}
/* Hover style */
.custom-select:hover {
border:1px solid #888;
}
/* Focus style */
.custom-select select:focus {
outline:none;
box-shadow: 0 0 1px 3px rgba(180,222,250, 1);
background-color:transparent;
color: #222;
border:1px solid #aaa;
}
/* Set options to normal weight */
.custom-select option {
font-weight:normal;
}
Since Firefox 35, "-moz-appearance:none" that you already wrote in your code, finally remove arrow button as desired.
It was a bug solved since that version.
A lot of Discussions Happening here & there but I don't see some proper solution for this problem. Finally Ended up by writing a small Jquery + CSS code for doing this HACK on IE & Firefox.
Calculate Element Width (SELECT Element) using Jquery.
Add a Wrapper Around Select Element and Keep overflow hidden for this element. Make sure that Width of this wrapper is appox. 25px less as that of SELECT Element. This could be easily done with Jquery.
So Now Our Icon is Gone..! and it is time for adding our image icon on SELECT element...!!!
Just add few simple lines for adding background and you are all Done..!!
Make sure to use overflow hidden for outer wrapper,
Here is a Sample of Code which was done for Drupal. However could be used for others also by removing few lines of code which is Drupal Specific.
/*
* Jquery Code for Removing Dropdown Arrow.
* #by: North Web Studio
*/
(function($) {
Drupal.behaviors.nwsJS = {
attach: function(context, settings) {
$('.form-select').once('nws-arrow', function() {
$wrap_width = $(this).outerWidth();
$element_width = $wrap_width + 20;
$(this).css('width', $element_width);
$(this).wrap('<div class="nws-select"></div>');
$(this).parent('.nws-select').css('width', $wrap_width);
});
}
};
})(jQuery);
/*
* CSS Code for Removing Dropdown Arrow.
* #by: North Web Studio
*/
.nws-select {
border: 1px solid #ccc;
overflow: hidden;
background: url('../images/icon.png') no-repeat 95% 50%;
}
.nws-select .form-select {
border: none;
background: transparent;
}
Solution works on All Browsers IE, Chrome & Firefox
No need of Adding fixed Widths Hacks Using CSS. It is all being handled Dynamically using JQuery.!
More Described at:- http://northwebstudio.com/blogs/1/jquery/remove-drop-down-arrow-html-select-element-using-jquery-and-css
try this css
select {
/*for firefox*/
-moz-appearance: none;
/*for chrome*/
-webkit-appearance:none;
}
Its working
The appearance property from CSS3 does not allow none value. Take a look at the W3C reference. So, what you is trying to do isn't valid (indeed Chrome shouldn't accept too).
Then unfortunatelly we really don't have any cross-browser solution to hide that arrow using pure CSS. As pointed, you will need JavaScript.
I suggest you to consider using selectBox jQuery plugin. It's very lightweight and nicely done.
You could increase the width of the box and move the arrow closer to the left of the arrow. this then allows you to cover the arrow with an empty white div.
Have a look: http://jsbin.com/aniyu4/86/edit
Would you accept minor changes to the html?
Something like putting a div tag containing the select tag.
Take a look.
Or, you can clip the select. Something along the lines of:
select { width:200px; position:absolute; clip:rect(0, 170px, 50px, 0); }
This should clip 30px of the right side of select box, stripping away the arrow. Now supply a 170px background image and voila, styled select
It's a huge hack, but -moz-appearance: menulist-text might do the trick.
I was having the same issue. It's easy to make it work on FF and Chrome, but on IE (8+ that we need to support) things get complicated. The easiest solution I could find for custom select elements that works "everywhere I tried", including IE8, is using .customSelect()
A useful hack for me is to set the (selects) display to inline-flex. Cuts the arrow right out of my select button. Without all of the added code.
For Fx only. -webkit appearance still needed for Chrome, etc...
Jordan Young's answer is the best. But if you can't or don't want to change your HTML, you might consider just removing the custom down arrow served to Chrome, Safari, etc and leaving firefox's default arrow - but without double arrows resulting. Not ideal, but a good quick fix that doesn't add any HTML and doesn't compromise your custom look in other browsers.
<select>
<option value='1'> First option </option>
<option value='2'> Second option </option>
</select>
CSS:
select {
background-image: url('images/select_arrow.gif');
background-repeat: no-repeat;
background-position: right center;
padding-right: 20px;
}
#-moz-document url-prefix() {
select {
background-image: none;
}
}
hackity hack ... a solution that works in every browser I've tested (Safari, Firefox, Chrome). Don't have any IEs lying around, so it would be nice if you could test and comment:
<div class="wrapper">
<select>
<option>123456789</option>
<option>234567890</option>
</select>
</div>
CSS, with url-encoded image:
.wrapper { position:relative; width:200px; }
.wrapper:after {
content:"";
display: block;
position: absolute;
top:1px; height:28px;
right:1px; width:16px;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAAcCAYAAACH81QkAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowODgwMTE3NDA3MjA2ODExOEE2RENENTU2MTFGMEQ1RCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpGNDE5NDQ3Nzc5ODIxMUU0OEU0M0JFMzgzMkUxOTk3MiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpGNDE5NDQ3Njc5ODIxMUU0OEU0M0JFMzgzMkUxOTk3MiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MDk4MDExNzQwNzIwNjgxMThBNkRDRDU1NjExRjBENUQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MDg4MDExNzQwNzIwNjgxMThBNkRDRDU1NjExRjBENUQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4o7anbAAAAjklEQVR42uzUsQ3EIAwFUPty7MBOsAoVC7EVYgyUSFcdzn0iJYquAZGSLxnLzatsWERWGsvGP0QGkc+LxvN9AqGJTKQJMcYQM/+VtbZdiTGKUgr3cxbmlJI0ZiW83vsbgrkjB5JzFq11BdAxdyNICKEi6J25kFKKOOdq70We+JS2ufYTacjyxrKMLtsuwAAznzqGLHX9BwAAAABJRU5ErkJggg==);
pointer-events: none;
}
select {
width: 100%;
padding:3px;
margin: 0;
border-radius: 0;
border:1px solid black;
outline:none;
display: inline-block;
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
cursor:pointer;
float:none!important;
background:white;
font-size:13px;
line-height: 1em;
height: 30px;
padding:6px 20px 6px 10px;
}
http://codepen.io/anon/pen/myPEBy
I'm using the :after-element to cover the ugly arrow. Since select doesn't support :after, i need a wrapper to work with.
Now, if you would click on the arrow, the dropdown won't register it ... unless your browser supports pointer-events: none, which everyone except IE10- does: http://caniuse.com/#feat=pointer-events
So for me it's perfect - a nice, clean, low-headache solution, at least compared to all the other options which include javascript.
tl;dr:
If IE10 (or lower) Users click the arrow, it won't work. Works good enough for me...
If you don't mind fiddling with JS, I wrote a small jQuery plugin that helps you do it. With it you don't need to worry about vendor prefixes.
$.fn.magicSelectBox = function() {
var $e = this;
$e.each(function() {
var $select = $(this);
var $magicbox = $('<div></div>').attr('class', $select.attr('class')).attr('style', $select.attr('style')).addClass('magicbox');
var $innermagicbox = $('<div></div>').css({
position: 'relative',
height: '100%'
});
var $text = $('<span></span>').css({
position: 'absolute'
}).text($select.find("option:selected").text());
$select.attr('class', null).css({
width: '100%',
height: '100%',
opacity: 0,
position: 'absolute'
}).on('change', function() {
$text.text($select.find("option:selected").text());
});
$select.parent().append($magicbox);
$innermagicbox.append($text, $select);
$magicbox.append($innermagicbox);
});
return $e;
};
Fiddle here: JS Fiddle
The condition is that you have to style the select from scratch (this means setting the background and border), but you probably want to do this anyway.
Also since the function substitutes the original select with a div, you will lose any styling done directly on the select selector in your CSS. So give the select element a class and style the class.
Supports most modern browsers, if you want to target older browsers, you can try an older version of jQuery, but perhaps have to replace on() with bind() in the function (not tested)
The other answers didn't seem to work for me, but I found this hack.
This worked for me (July 2014)
select {
-moz-appearance: textfield !important;
}
In my case, I also had a woocommerce input field so I used this
.woocommerce .quantity input.qty {
-moz-appearance: textfield !important;
}
Updated my answer to show select rather than input

Buttons size not equal in IE and Firefox

I have few buttons on my jsp page and I am using the style as :
*.buttonblue {
background-color: #003366;
border-color: #99CCFF;
color: #FFFFFF;
font-family: Verdana,Arial,Helvetica;
font-size: 8pt;
font-weight: bold;
height: 20px;
display:inline;
line-height: 1.2;
text-align: center;
margin-top: 2px;
}*
In Firefox the buttons are bit smaller than IE6.
I can not define the size of buttons as the caption changes the button size changes accordingly.
I tried with width:auto but no success. Also, with overflow:visible the buttons in IE becomes bit smaller.
Please help.
IE has a bug with button padding, you may be experiencing this. Try something like this:
input.button {
padding: 0 .25em;
width: 0; /* IE table-cell margin fix */
overflow: visible;
}
input.button[class] { /* IE ignores [class] */
width: auto; /* cancel margin fix for other browsers */
}
Note: if your buttons become even smaller in IE after applying this fix, make sure you are not in quirks mode. In IE's quirks mode the widths of objects are calculated differently than in standards mode, making everything a bit smaller (for items with a specified width). Best to always use standards mode if you expect consistent cross-browser results (even though IE's standards mode isn't that good, it's still way more standard than quirks mode).
Either use Conditional Comments :
Ex:
<!--[if IE 6]>
Special instructions for IE 6 here
<![endif]-->
Or set custom width for input only read by IE like this :
.buttonblue {
background-color: #003366;
border-color: #99CCFF;
color: #FFFFFF;
font-family: Verdana,Arial,Helvetica;
font-size: 8pt;
font-weight: bold;
height: 20px;
display:inline;
line-height: 1.2;
text-align: center;
margin-top: 2px;
width: 100px; /* Read by FF */
#width:100px; /* Read by IE*/
}
Now you can tweak them accordingly
A button is rendered however the browser decides. You will need to use an image and set it up to work like a button if you want it to look that same in all browsers.