CODEWITHSUNDEEP
htmlcsscheckbox
Erik
Erik

Reputation: 5791

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.

Upvotes: 22

Views: 80791

Answers (8)

Petar
Petar

Reputation: 339

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 with the appearance property:

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

Upvotes: 17

itsmyself stylish
itsmyself stylish

Reputation: 11

I just try something relevent, hope it'll solve your problem!

Actually you can't remove only border but you can use appearance property to remove whole element body, then you can implement your styling and make the checkbox as you want.. Here you can see below:-

input[type='checkbox']{
transform:scale(2);
appearance:none;
border:2px solid black;
height:50px;
width:50px;
margin-left:2em; margin-top:2em; font-size:40px; position:relative; }
input[type='checkbox']:checked:before{
 content:'\2713'; background:blue; width:100%; height:100%; top:0;
left:0;
 display:flex; align-items:center; justify-content:center; color:white; font-weight:bold; }
<input type='checkbox'>

Upvotes: 1

Codemaker2015
Codemaker2015

Reputation: 15726

input[type="checkbox"] {
    width: 25px;
    height: 25px;
    background: gray;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    outline: none;
    position: relative;
    left: -5px;
    top: -5px;
    cursor: pointer;
}

Upvotes: 1

Oluwatobi Omotayo
Oluwatobi Omotayo

Reputation: 1881

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

-webkit-appearance: none;

Upvotes: 0

dauber
dauber

Reputation: 343

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!

Upvotes: 6

Greg McNulty
Greg McNulty

Reputation: 1466

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.

Upvotes: 8

tr4656
tr4656

Reputation: 1298

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

Upvotes: -3

naikus
naikus

Reputation: 24472

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

Upvotes: 8

Related Questions