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;
}
When I use bootstrap, it removes the background color from everthing when I try to print my page.
Almost everything on my website is using bootstrap classes so I want to avoid a lot of manual CSS outside bootstrap.
I've found out that bootstrap uses #media print to remove the background color. I'm using a bootstrap theme as well (theme united) which is removing the background color as well.
theme-united.css
#media print
*, *:before, *:after {
background: rgba(0, 0, 0, 0) !important;
color: rgb(0, 0, 0) !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
text-shadow: none !important;
bootstrap.min.css
#media print
*, :after, :before {
color: rgb(0, 0, 0)!important;
text-shadow: none!important;
background: 0 0!important;
-webkit-box-shadow: none!important;
box-shadow: none!important;
Is there a way to make sure that the background color is not removed when printing without editing these 2 CSS files?
For example:
When I use .alert-danger, I want that alert danger printed as it is displayed on screen, so would be printed as a red box.
See JSFiddle:
http://jsfiddle.net/7mtk7wrh/
Unfortunately there is not a good answer to your question - but maybe if you understand the why's then you can choose a way forward.
Why?
It's true that Bootstrap uses the #media print { * { color: $fff; background: transparent; }} -- but there is a very solid reason. This bit of code is actually derived from the normalizer.css project (by a then college of #mdo 's, #necolas) - it's intent is to make all browsers behave the same. These guys chose to "normalise" the css for a very good reason:
With most browsers one can choose to include or exclude background color, so the behaviour is not standard across even the same browser. Imagine for a sec a website with very dark background with white text - when printing with backgrounds off, it will look like you're printing nothing - when actually you're printing white text on no (white) background.
There was no way to account for all the different uses of color, so they choose to go black (font) and white (background, actually 'transparent'). Even the choice of black was well thought of -- its a better print solution, as most color printers have more black "ink/toner" (more economical) and they don't need to mix color to make black (so faster).
Remember that Bootstrap is also a "framework" - so a starting point if you will - and kudos to #mdo and #necolas for having the foresight to think of this in terms of establishing a predictable baseline. (No, I don't know them.)
Nope...
So the thinking here is: "what if we could 'go back' and unset this. Unfortunately CSS does not work like that - yes browsers load the CSS declarations in a "queue" where the last declaration wins (LIFO, or last-in-first-out), but I'm not aware of a way to remove this stack. So CSS developers just add more to the end...
So one would assume that we can go back that way --- add a * { background-color: inherit }. Problem is that inherit reverts to the parent property, but * is the root, so it has nothing to revert to. Same goes for initial!
Maybe!
So we're left with 4 options, none of them is what you where hoping for, but it is what it is. In order of difficulty:
Download the BS (less or sass) source, edit the offending code, and then compile it. (You need to use a local copy, CDN's will not work.)
Download the CSS variant of your choice, search and delete the offending code. (No CDN's again.)
Use getbootstrap.com/customize to create a new variant - exclude "Print media styles" under "Common CSS". (Again, no CDN's)
Override the specific items who's color you want to print: e.g.
#media print {
.alert-danger {
color: yellow !important;
background-color: red !important;
}
}
CDN's copies of BS will now work, but then you have the problem of the user possibly not printing backgrounds and having the output white (yellow in the e.g.) on white!
Finally
Well I hope learning the why's was at the very least a way of you thinking of a workaround. General rule of thumb I follow is that when printing, the background is (should be) always white. When constrained that way you start thinking of novel ideas, like exclamation icons around the text that only "print" (#media only screen { .hidden-screen { display: none; }})
Despite !important usage being generally frowned upon, this is the offending code in bootstrap.css
.table td,
.table th {
background-color: #fff !important;
}
Let's assume you are trying to style the following HTML:
<table class="table">
<tr class="highlighted">
<th>Name</th>
<th>School</th>
<th>Height</th>
<th>Weight</th>
</tr>
</table>
To override this CSS, place the following (more specific) rule in your stylesheet:
#media print {
table tr.highlighted > th {
background-color: rgba(247, 202, 24, 0.3) !important;
}
}
This works because the rule is more specific than the bootstrap default.
You can get this working by removing those lines from bootstrap.css file, there might be a jquery solution to this but it is much more complicated than erasing a few lines. :/
Or you could use a plugin called html2canvas as presented in this jsfiddle
I ended up here with the same problem but found the Chrome comes with a show background graphics option on the print dialog under more settings that did exactly that! No modification of Bootstrap (4) required.
#Vino explained really well. I was also facing problem because bootstrap.css makes background transparent forcefully. Thus I have customized the specific element in my custom CSS file. Remember to change <.element> with element where you want the colorful background instead of transparent.
#media print {
.element{
background-color: white !important;
box-shadow: inset 0 0 0 1000px #fff !important; /* workaround for IE 11*/
}
}
i had also face the same problem.. i just remove the bootstrap.min.css from my code then it work for me.
just make the specificity-value more specific and you should be ok.
something like:
#media print {
tbody>tr:nth-child(even)>td {
background-color: rgb(230, 216, 216) !important;
}
}
Actually, there is a solution, but this is still a hack.
It was used for a pdf generation in puppeteer, so it was tested only in this case, but most probably should work in all modern browsers.
Keep in mind that BOOTSTRAP_PRINT_RULE can be different in a different version of Bootstrap.
const BOOTSTRAP_PRINT_RULE = `#media print {
*, ::after, ::before { color: rgb(0, 0, 0) !important; text-shadow: none !important; background: 0px 0px !important; box-shadow: none !important; }
a, a:visited { text-decoration: underline; }
a[href]::after { content: " (" attr(href) ")"; }
abbr[title]::after { content: " (" attr(title) ")"; }
a[href^="javascript:"]::after, a[href^="#"]::after { content: ""; }
blockquote, pre { border: 1px solid rgb(153, 153, 153); break-inside: avoid; }
thead { display: table-header-group; }
img, tr { break-inside: avoid; }
img { max-width: 100% !important; }
h2, h3, p { orphans: 3; widows: 3; }
h2, h3 { break-after: avoid; }
.navbar { display: none; }
.btn > .caret, .dropup > .btn > .caret { border-top-color: rgb(0, 0, 0) !important; }
.label { border: 1px solid rgb(0, 0, 0); }
.table { border-collapse: collapse !important; }
.table td, .table th { background-color: rgb(255, 255, 255) !important; }
.table-bordered td, .table-bordered th { border: 1px solid rgb(221, 221, 221) !important; }
}`
for (const styleSheet of document.styleSheets) {
for (const [index, rule] of Array.from(styleSheet.cssRules).entries()) {
if (rule.cssText && rule.cssText.includes(BOOTSTRAP_PRINT_RULE)) {
styleSheet.deleteRule(index)
return;
}
}
}
Since version 4 of Bootstrap with SASS you can actually set the following variable to false which will turn of this behavior:
$enable-print-styles: false
If this is not an option, there is the following script which brutally rips out all #media print annotations from the CSS. It assumes that Bootstrap is the first style sheet loaded and that it runs after Bootstrap has loaded.
var style = document.styleSheets[0];
[].forEach.call(style.cssRules || [], function (aRule, aIndex) {
if (aRule.cssText.indexOf("#media print") >= 0) {
style.deleteRule(aIndex);
}
});
You can use this (https://developer.mozilla.org/fr/docs/Web/CSS/print-color-adjust)
.your-selector {
-webkit-print-color-adjust: exact;
}
Warning: This is not standart, but might help you.
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