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;
}
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
Is There a Vr (Vertical Rule) in HTML
CSS: Display:Block; Vs Display:Table;
How to Display Excel Sheet in HTML Page
Box-Shadow on Ie9 Doesn't Render Using Correct CSS, Works on Firefox, Chrome
Hide Microdata Property Value in 'Content' Attribute
CSS Position Element "Fixed" Inside Scrolling Container
Freezing/Fixing The Top Header Row of a Table
Can HTML5 Websockets Connect 2 Clients (Browsers) Directly Without Using a Server? (P2P)
Border Around Tr Element Doesn't Show
Load a Low-Res Background Image First, Then a High-Res One
Disable Chrome Translation Bar on My Website
How to Remove The Space Between List Items
Height:100% Not Working in Internet Explorer
Selecting Siblings Between Two Nodes Using Xpath
Custom Pinterest Button for Custom Url (Text-Link, Image, or Both)