how to remove default status of Selectbox/Checkbox?

问题

I'd like to know, how to remove default arrow of selectbox and gradations in Checkbox and I wanna use custom image on it.

for example, here is some code.

 <select class="selectParent">
     <option value='1'>Title</option>
     <option value='2'>Description</option> 
     <option value='3'>Author</option>
 </select>

I searched some solutions to remove default status using -webkit- appearance; and -moz- appearance; but I have no idea in IE. Is there any possibility to remove a default status in IE?

as a same logic, I'd like to know, how to remove default status in checkbox.

<input type="checkbox" name="category" id="category10"/>

I'll be wating for good answers thx

回答1:

appearance: none would work, but this is not a cross-browser way to do it.

select, input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

DEMO

EDIT:

Here is a cross-browser method for checkbox,

http://jsfiddle.net/kyLq4/1/

回答2:

This is currently possible in all browsers except Opera (although that should work when it switches to Blink).

For Firefox and WebKit/Blink, you need to use appearance: none;, which is fairly heavy handed and removes all styling:

input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
}

You can also include the prefixless version if you wish, although the appearance property is no longer in any standard. It was dropped from CSS3 Basic UI.

For IE, you can specifically style the check mark by using the -ms-check pseudo element. If you'd like to just hide the checkmark you can do the following:

input[type="checkbox"]::-ms-check {
    color: transparent;
}

If you want to hide the entire element, like what appearance: none; does, you can do:

input[type="checkbox"]::-ms-check {
    display: none;
}

To add the check mark back, you should use the :checked pseudo class:

input[type="checkbox"]:checked {
    background-color: green;
}

Here is a demo using the latter approach. I've just set the background color when checked, but you can just as easily use an image: http://jsfiddle.net/HxqKu/3/

来源：https://stackoverflow.com/questions/16350227/how-to-remove-default-status-of-selectbox-checkbox

标签

html

css

web