I'm trying to implement a custom styled select element but having issues with IE10 and 11 where the native chevron is still visible. I've tried to implement the standard css to do this but to no avail:
select::-ms-expand {
display: none;
}
I've even tried:
select::-ms-expand {
display: none!important;
visibility: hidden!important;
opacity: 0!important;
}
On the select I have:
select {
.......
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
text-overflow: '';
.......
}
What am I doing wrong?
Related
I need to hide the dropdown arrows on my select boxes when they are disable. From every thing I have read, this should work?
select.btn-underline-primary {
box-shadow: none !important;
padding-left: 0;
color: $dark !important;
option {
border: none;
}
&:disabled {
border-bottom-color: transparent;
&::-ms-expand {
display: none;
}
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
}
The problem is that applying display: none to the ::ms-expand only hides the dropdown for Internet Explorer 10 and 11. If you additionally want to hide it for Firefox / Chrome , you'll need to apply -moz-appearance: none and -webkit-appearance: none to the select respectively.
Note that :disabled is an attribute of the select element itself, and does not create a separate pseudo-class in the DOM. As such, you'll need a separate selector:
select.btn-underline-primary:disabled
Which combined with the rest of the code looks like:
select.btn-underline-primary {
box-shadow: none !important;
padding-left: 0;
color: $dark !important;
option {
border: none;
}
&::-ms-expand {
display: none; /* Hide dropdown in IE 10 & 11 */
}
}
select.btn-underline-primary:disabled {
border-bottom-color: transparent;
-moz-appearance: none; /* Hide dropdown in Firefox */
-webkit-appearance: none; /* Hide dropdown in Chrome */
}
This can be seen working on JSFiddle.
I am using select tag and the following is the css I used in order to hide the default Dropdown button that comes with element:
select,
input {
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
-ms-appearance: none;
appearance: none;
}
It works on all browsers except IE. I tried using the expand option but also does not work.
select::-ms-expand{
display: none;
}
How can I hide the Dropdown of the select tag so that I can add an icon of my wish?
Thanks in advance
Wrap the select tag inside a div and do some adjustments. You will get the desired effect. see the snippet
select::-ms-expand {
display: none;
}
will work IE 10 and above, for IE 9 and below, we can simply do a trick by giving the wrapper less width than that of the select element. thus, the caret button will overflow the parent and become hidden.
.select{
width:80px;
overflow:hidden;
border: 1px solid #333;
padding: 0;
}
select::-ms-expand {
display: none;
}
.select select{
width: 120px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding: 6px 15px;
border: none;
background: transparent url("https://cdn2.iconfinder.com/data/icons/navigation-set-arrows-part-two/32/Arrow_Download-16.png") no-repeat 60px center;
outline: 0;
}
<div class="select">
<select>
<option value="1">Option</option>
<option value="2">Option</option>
<option value="3">Option</option>
</select>
</div>
I want the inner element (slot in this case) to fill the button up. It works in chrome but doesn't in FireFox. I think there might be use user-agent styles in FireFox. I can't specify how wide the button is because I don't know it's size (not fixed).
jsbin link to play around:
http://jsbin.com/pucapoxizi/1/edit?html,css,output
What I've got so far:
HTML:
<button>
<slot>abc</slot>
</button>
CSS:
button {
border: 0;
padding: 0;
background: red;
}
slot {
width: 100%;
background: green;
}
Screenshots
FireFox:
Chrome:
You need to remove the extra padding for firefox button:
button::-moz-focus-inner {
padding: 0;
border: 0
}
you need to write css on top of a css reset stylesheet,for example a button reset css
button {
background: none;
border: 0;
color: inherit;
/* cursor: default; */
font: inherit;
line-height: normal;
overflow: visible;
padding: 0;
-webkit-appearance: button; /* for input */
-webkit-user-select: none; /* for button */
-moz-user-select: none;
-ms-user-select: none;
}
button::-moz-focus-inner {
border: 0;
padding: 0;
}
form select.form-control { -moz-appearance: none; }
I am using below css for hiding arrow from select list element but it's not working in Firefox 34 version. is there any css fix for older browser version
https://jsfiddle.net/utLxvqbx/
add this to your css:
select {
-webkit-appearance: none;
-moz-appearance: none;
text-indent: 1px;
text-overflow: '';
}
See fiddle: https://jsfiddle.net/utLxvqbx/2/
I'm trying create a custom drop down control and I need to hide the arrows from the native controls. I'm using the following CSS, which is working for Chrome and Safari, but not in Mozilla and IE.
select.desktopDropDown
{
appearance: none;
-moz-appearance:none; /* Firefox */
-webkit-appearance:none; /* Safari and Chrome */
}
Here is a [jsfiddle][1].
Use this it will work but with IE10+ and for FF :
Your css should look like this:
select.desktopDropDown::-ms-expand {
display: none;
}
More about ::ms-expand.
Then for the rest :
select.desktopDropDown {
outline : none;
overflow : hidden;
text-indent : 0.01px;
text-overflow : '';
background : url("../img/assets/arrow.png") no-repeat right #666;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
}
Note: I hardcoded path "../img/assets/arrow.png" as background.
This should work good for you in IE, Firefox and Opera .
Bare-bones examples:
For I.E:
select::-ms-expand {
display: none;
}
For Firefox:
select {
-moz-appearance: none;
appearance: none;
text-overflow: ''; /* this is important! */
}
For Fx I use -moz-appearance: checkbox-container which works nicely.
So putting it all together the following should be sufficient for you:
select.desktopDropDown {
appearance: none;
-webkit-appearance: none;
-moz-appearance: checkbox-container;
border-style: none;
}
select.desktopDropDown::-ms-expand {
display: none;
}
In fact this trick is mainly required for IE10+ where the arrows are in the Metro style of Windows 8, even on Windows 7. Though Windows 8 users must be used to the style cause it's used through the OS. Anyway, I'd recommend instead of using:
display: none;
To use:
visibility: hidden;
Because, at least in IE, the former causes the blue line of the selected item to overlay the dropdown arrow when the select is focused, while the latter does not.
we can create custom by using css. tested on IE10, Mozilla and chrome borwser...
Working Example as below :
.customSelect {
position: relative;
}
/* IE11 hide hacks*/
select::-ms-expand {
display: none;
}
.customSelect:after {
content: '<>';
font: 17px "Consolas", monospace;
color: #333;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
right: 11px;
/*Adjust for position however you want*/
top: 18px;
padding: 0 0 2px;
border-bottom: 1px solid #999;
/*left line */
position: absolute;
pointer-events: none;
}
.customSelect select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/* Add some styling */
display: block;
width: 100%;
height: 50px;
float: none;
margin: 5px 0px;
padding: 0px 24px;
font-size: 16px;
line-height: 1.75;
color: #333;
background-color: #ffffff;
background-image: none;
border: 1px solid #cccccc;
-ms-word-break: normal;
word-break: normal;
}
<div class="customSelect">
<label>
<select>
<option selected> Select Box </option>
<option>Option 1</option>
<option>Option 2</option>
<option>Last long option</option>
</select>
</label>
</div>