I have the following html input:
<label class="selectit">
<input value="women_shoulder_bags" type="checkbox" id="in-women-15797">Shoulder Bags
</label>
I also have the following CSS:
.selectit input {
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
}
This works in Safari, Chrome and all others. But in Internet Explorer 8, the checkboxes still show up. My question is, how do I use CSS to hide the input checkboxes in Internet Explorer 8?
Thanks
To achieve that for ie10+ you can use ::-ms-check with display:none
https://msdn.microsoft.com/en-us/library/hh771816(v=vs.85).aspx
input::-ms-check{
display:none
}
UPDATE: for ie8, ie9
you can use the same technique in this answer https://stackoverflow.com/a/23777214/2253257
input::-ms-check {
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
/* IE 5-7 */
filter: alpha(opacity=0);
/* Good browsers :) */
opacity:0;
}
Why don't you just hide it in every browser? Or is there a reason it should show in Opera?
You could try:
.selectit input {
display: none;
}
Try:
.selectit input {
width: 0px; /* or right: 100%; */
position: absolute;
}
Related
I want to set a placeholder for a select input in Vuejs
The example in this PEN.
https://codepen.io/halcolo/pen/ZELVVvw
In this example, I want to change the color of the default value Years in service (My placeholder for this select input) I'm trying to change the CSS.
option[value=""][disabled]{
color: #bebebe
}
But don't change anything, I used this after but at this case it does not work
Set an ID in the select
<select #change="onChangeEvent(field)" :id="field.label" class="Select" >
Unlock the appearance of select with this CSS.
.select .Select{
-webkit-appearance: none; /* WebKit */
-moz-appearance: none; /* Mozilla */
-o-appearance: none; /* Opera */
-ms-appearance: none; /* Internet Explorer */
appearance: none; /* CSS3 */
color:#bbb;
}`
Create a method on change event and use it as a change in the select
onChangeEvent(field){
console.log(field.label)
document.getElementById(field.label).style.color = "#000000";
For the complete example.
https://codepen.io/halcolo/pen/ZELVVvw
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()
On Firefox 28, I'm using <input type="number"> works great because it brings up the numerical keyboard on input fields which should only contain numbers.
In Firefox 29, using number inputs displays spin buttons at the right side of the field, which looks like crap in my design. I really don't need the buttons, because they are useless when you need to write something like a 6~10 digit number anyway.
Is it possible to disable this with CSS or jQuery?
According to this blog post, you need to set -moz-appearance:textfield; on the input.
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type=number] {
-moz-appearance:textfield;
}
<input type="number" step="0.01"/>
It's worth pointing out that the default value of -moz-appearance on these elements is number-input in Firefox.
If you want to hide the spinner by default, you can set -moz-appearance: textfield initially, and if you want the spinner to appear on :hover/:focus, you can overwrite the previous styling with -moz-appearance: number-input.
input[type="number"] {
-moz-appearance: textfield;
}
input[type="number"]:hover,
input[type="number"]:focus {
-moz-appearance: number-input;
}
<input type="number"/>
I thought someone might find that helpful since I recently had to do this in attempts to improve consistency between Chrome/FF (since this is the way number inputs behave by default in Chrome).
If you want to see all the available values for -moz-appearance, you can find them here (mdn).
In SASS/SCSS style, you can write like this:
input[type='number'] {
-moz-appearance: textfield;/*For FireFox*/
&::-webkit-inner-spin-button { /*For Webkits like Chrome and Safari*/
-webkit-appearance: none;
margin: 0;
}
}
Definitely this code style can use in PostCSS.
/* for chrome */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;}
/* for mozilla */
input[type=number] {-moz-appearance: textfield;}
Faced the same issue post Firefox update to 29.0.1, this is also listed out here
https://bugzilla.mozilla.org/show_bug.cgi?id=947728
Solutions:
They(Mozilla guys) have fixed this by introducing support for "-moz-appearance" for <input type="number">.
You just need to have a style associated with your input field with "-moz-appearance:textfield;".
I prefer the CSS way
E.g.:-
.input-mini{
-moz-appearance:textfield;}
Or
You can do it inline as well:
<input type="number" style="-moz-appearance: textfield">
This worked for me:
input[type='number'] {
appearance: none;
}
Solved in Firefox, Safari, Chrome. Also, -moz-appearance: textfield; is not supported anymore (https://developer.mozilla.org/en-US/docs/Web/CSS/appearance)
In 2021, there is a much better solution to make your firefox like Google Chrome.
You should use focus and hover, too.
input[type="number"] {
appearance: none; /* textfield also works! */
}
input[type="number"]:focus,
input[type="number"]:hover {
appearance: auto;
}
for more information, please read the documentation
I mixed few answers from answers above and from How to remove the arrows from input[type="number"] in Opera
in scss:
input[type=number] {
&,
&::-webkit-inner-spin-button,
&::-webkit-outer-spin-button {
-webkit-appearance: none;
-moz-appearance: textfield;
appearance: none;
&:hover,
&:focus {
-moz-appearance: number-input;
}
}
}
Tested on chrome, firefox, safari
I have a div over an image that I use on hover to have some kind of milky layer, which I get with background-color:rgba(255,255,255,0.1).
As I am cross browser testing my web site, I realize that rgba is not supported by IE8. So what I would like is not to have the milky layer at all when rgba is not supported. Here below what I tried as fallback:
1/ background-color:rgba(255,255,255,0.1);
2/ background-color:transparent; background-color:rgba(255,255,255,0.1);
3/ background-color:none; background-color:rgba(255,255,255,0.1);
With all three tries, I have a full blank layer over my image. How can I accomplish this?
I think the following will work.
Wrap the image in a container:
<div class="img-overlay">
<img src="http://placekitten.com/200/200">
</div>
apply the following CSS:
.img-overlay {
border: 1px solid blue;
float: left;
position: relative;
}
.img-overlay:before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: white;
filter: alpha(opacity=40); /* internet explorer */
opacity: 0.4; /* fx, safari, opera, chrome */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=40)"; /*IE8*/
}
img {
display: block;
}
See demo at http://jsfiddle.net/audetwebdesign/DkRJs/
The idea is to use absolute positioning to position an element over the image and then apply the opacity property.
If the older browsers don't support the pseudo element, you will need to place in the HTML code directly.
Note: I just reread the original question and realized that I solved the wrong problem.
Sorry for the inconvenience.
IE8 Issue
I tested this in IE8 and just realized that you need the filter property to make it fully backwards compatible.
It's not ideal but you could use a 1px by 1px transparent png as a repeating background image.
You could even do this using IE conditional comments so as just to target IE8.
You could also use:
img:hover{opacity:0.8}
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;