How do I remove checkbox border?

问题

Is it possible to remove the borders around a checkbox so that it appears invisible? I have it placed in a DIV with a color background.

回答1:

Unfortunately, its not possible to remove borders on browser native checkboxes (it will not work in all browsers), You will have to write your own checkbox-like state widget to implement this. Check out Nice forms if you want to style your regular form controls with custom styling

回答2:

For FireFox: try border:none. For IE try: style="background:transparent;border:0"

The other solution is to create your own images for checked and unchecked displaying the appropriate onclick of the image.

回答3:

I know this is a late answer, but a CSS expert I work with gave me this way to get rid of the border around a checkbox (and probably radio button) in IE10:

Set the border color to the same color as the page's background.
Apply a box-shadow of "none" to it.

That's it. Worked like a charm!

回答4:

As this is the first result for me when searching for "remove checkbox border" in Google, let me mention that checkbox default styling could be removed in all browsers except IE (no shit...) with the appearance property:

-webkit-appearance: none;
-moz-appearance: none;
appearance: none;

回答5:

In CSS this is possible by setting the web kit appearance to none. Something like this

-webkit-appearance: none;

回答6:

Use outline:

outline: 0px;

will get rid of it.

回答7:

You would have to use some widget or a custom ui of some sort to remove the borders.

I'm not sure if this works: <input type="checkbox" style="border: 0;" />

回答8:

asp:checkbox is span element which contain input type=checkbox. You can setup style just for span. But if you want to change checkbox border inside the element you can use the javascript

<body onload="javascript:OnLoad();" >

<script language="javascript" type="text/javascript">
<!--
    function OnLoad() {
        document.getElementById("<%=chBox.ClientID%>").style.border = "0px";
    }
-->
</script>

  <asp:CheckBox ID="chBox" runat="server" Text="Checkbox text" />

来源：https://stackoverflow.com/questions/3544690/how-do-i-remove-checkbox-border

标签

html

css

checkbox