Style a Checkbox in Firefox - Remove Check and Border

Style a checkbox in firefox — remove check and border

This tutsplus tutorial solved my question.

input[type="checkbox"] {  display:none;} input[type="checkbox"] + label span {  display:inline-block;  width:19px;  height:19px;  margin:-1px 4px 0 0;  vertical-align:middle;  background:url(https://cdn.tutsplus.com/webdesign/uploads/legacy/tuts/391_checkboxes/check_radio_sheet.png) left top no-repeat;  cursor:pointer;}input[type="checkbox"]:checked + label span {  background:url(https://cdn.tutsplus.com/webdesign/uploads/legacy/tuts/391_checkboxes/check_radio_sheet.png) -19px top no-repeat;}
<input type="checkbox" id="c1" name="cc" /><label for="c1"><span></span>Check Box 1</label>

Remove border of checkbox in firefox

label.checkbox input[type="checkbox"] {display:none;}label.checkbox span {  display:inline-block;  border:1px solid #BBB;  width:25px;  height:25px;  vertical-align:middle;  margin:3px;  transition:width 0.1s, height 0.1s, margin 0.1s;  background-image: url(http://livemysite.com/Eduardo/img/unchecked.png);}label.checkbox :checked + span {  width:27px;  height:27px;  margin: 2px;  background-image: url(http://livemysite.com/Eduardo/img/checked.png);  background-size: 70%;   background-repeat: no-repeat;   background-size: contain;}
<label class="checkbox">  <input type="checkbox"/>  <span></span>Test</label>

Remove required checkbox border in Firefox

The red border you are seeing is box-shadow. You can set it to none.

input[type=checkbox]:invalid {
box-shadow: none;
}

Sample Image

input[type=checkbox]:invalid {  box-shadow: none;}
<input type="checkbox" required>

Firefox - Remove border from undecorated checkbox

Unfortunately, it doesn't seem that setting any properties on the checkbox will help.

The only simple workaround that I have found is to wrap the checkbox in a <div>, and obscure the borders.

See my Fiddle.

HTML:

<div class="checkbox-container"><input type="checkbox" /></div>

CSS:

input[type="checkbox"] {
width: 110px;
height: 110px;
background: red;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none;
position: relative;
left: -5px;
top: -5px;
}
.checkbox-container {
position: absolute;
display: inline-block;
margin: 20px;
width: 100px;
height: 100px;
overflow: hidden;
}

By the way, (in Firefox at least), setting background doesn't have any effect.

How to remove unnecessary blue outlines of focused checkbox in Mozilla Firefox 89

input[type="checkbox"]:focus{
outline:0;
}

How to remove the focus-visible styles around checkboxes/radio buttons in Firefox 89+ (Proton)?

This seems to have been fixed. In Firefox 92 the following CSS once again removes the focus-visible styles around checkboxes/radio buttons as expected:

:focus {
outline: 0;
}

How do I remove checkbox border?

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

How to change checkbox's border style in CSS?

If something happens in any browser I'd be surprised. This is one of those outstanding form elements that browsers tend not to let you style that much, and that people usually try to replace with javascript so they can style/code something to look and act like a checkbox.

Firefox checkbox style issue

There's multiple records of bugs within firefox specifically for styling checkboxes and radio buttons.

My recommendation is to write your own solution.

label input[type="checkbox"]{ display: none; }
label input[type="checkbox"]:checked + .cr > .cr-icon{ transform: scale(1) rotateZ(0deg); opacity: 1;}
label input[type="checkbox"] + .cr > .cr-icon{ transform: scale(3) rotateZ(-20deg); opacity: 0; transition: all .3s ease-in;}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/><label>    <input type="checkbox" value="" checked="">    <span class="cr"><i class="cr-icon fa fa-check"></i></span>    Click Me</label>


Related Topics



Leave a reply



Submit