发表新帖
发表新帖

How do I remove checkbox border?

前端 未结
关注
8 1216
别跟我提以往
别跟我提以往 2020-12-06 05:33

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.

相关标签:
8条回答
  • 天命终不由人
    2020-12-06 06:00

    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!

    0 讨论(0)
  • 灰色年华
    2020-12-06 06:03

    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

    0 讨论(0)
  • 挽巷
    2020-12-06 06:03

    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;" />

    0 讨论(0)
  • 孤独总比滥情好
    2020-12-06 06:05

    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" />
    0 讨论(0)
  • 日久生厌
    2020-12-06 06:07

    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.

    0 讨论(0)
  • 日久生厌
    2020-12-06 06:13

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

    -webkit-appearance: none;
    0 讨论(0)
 看不清?
提交回复
热议问题