Is there a way to modify the border style of a checkbox input? I tried using border:1px solid #1e5180, but it doesn't seem to work in FireFox 3.5!
Is there a way to modify the border style of a checkbox input? I tried using border:1px solid #1e5180, but it doesn't seem to work in FireFox 3.5!
My recommendation is to utilize "outline" in place of "border". Here's an example: outline: 1px solid #1e5180.
To achieve a customized look for checkboxes, make use of the following CSS properties:
-moz-appearance:none;
-webkit-appearance:none;
-o-appearance:none;
By applying these styles, you can remove the default checkbox image/style and have the freedom to design it according to your preferences. However, please note that a border will still remain visible in Firefox.
I find it really surprising if anything actually works on every single browser. Form elements are notorious for being difficult to style across different browsers, often requiring developers to resort to using JavaScript to mimic the appearance and behavior of checkboxes.
One way to create the illusion of a border is by using box shadows:
-webkit-box-shadow: 0px 0px 0px 1px rgba(255,0,0,1);
-moz-box-shadow: 0px 0px 0px 1px rgba(255,0,0,1);
box-shadow: 0px 0px 0px 1px rgba(255,0,0,1);
My rendition incorporates FontAwesome to enhance the appearance of checkbox tickers. Since FontAwesome is widely used, it's likely that you already have it installed. While I haven't tested this in IE/Edge, it may not be a major concern for most users.
input[type=checkbox] {
-moz-appearance:none;
-webkit-appearance:none;
-o-appearance:none;
outline: none;
content: none;
}
input[type=checkbox]:before {
font-family: "FontAwesome";
content: "\f00c";
font-size: 15px;
color: transparent !important;
background: #fef2e0;
display: block;
width: 15px;
height: 15px;
border: 1px solid black;
margin-right: 7px;
}
input[type=checkbox]:checked:before {
color: black !important;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<input type="checkbox">Discover a CSS-only solution for custom checkboxes and radio buttons that works across different browsers, inspired by Martin's Custom Checkboxes and Radio Buttons with CSS3. Check it out here.
Try out the code on jsFiddle: here.
Tested successfully on various browsers including FireFox, Google Chrome, Opera, Internet Explorer, Microsoft Edge, and Safari Mobile iPhone iOS9.
label,
input[type="radio"] + span,
input[type="radio"] + span::before,
label,
input[type="checkbox"] + span,
input[type="checkbox"] + span::before
{
display: inline-block;
vertical-align: middle;
}
label *,
label *
{
cursor: pointer;
}
input[type="radio"],
input[type="checkbox"]
{
opacity: 0;
position: absolute;
}
input[type="radio"] + span,
input[type="checkbox"] + span
{
font: normal 11px/14px Arial, Sans-serif;
color: #333;
}
...
... <!-- Truncated for brevity -->
...
</label>When using Firefox, Chrome, and Safari, there are no noticeable changes.
However, in IE, the border appears outside the checkbox instead of being part of it, and the stylish shading effect within the checkbox disappears, reverting to a basic checkbox design.
In contrast, Opera applies the border style directly to the checkbox element itself. Furthermore, Opera handles other stylings differently: the color reflects as the tick color, while background-color fills the checkbox background (unlike in IE where background behaves as if enclosed in a <div> with a background).
The simplest workaround is to encase the checkbox within a <div>, as suggested by others. However, for complete control over appearance, resorting to an advanced image/javascript method, as recommended by some users, may be necessary.
Although I may be a bit outdated, one clever workaround is to enclose your checkbox within a label tag and then customize the label with a border:
<label class='hasborder'><input type='checkbox' /></label>
Next, apply styles to the label:
.hasborder { border:1px solid #F00; }
Customizing checkboxes (as well as various other input elements) using pure CSS can be quite challenging if you aim to make significant visual changes.
A recommended approach is to incorporate a solution similar to what jqTransform offers, where it replaces the inputs with images and utilizes JavaScript functionalities to simulate a checkbox (or any other element).
<!DOCTYPE html>
<html>
<head>
<style>
.abc123
{
-webkit-appearance:none;
width: 14px;
height: 14px;
display: inline-block;
background: #FFFFFF;
border: 1px solid rgba(220,220,225,1);
}
.abc123:after {
content: "";
display: inline-block;
position: relative;
top: -3px;
left: 4px;
width: 3px;
height: 5px;
border-bottom: 1px solid #fff;
border-right: 1px solid #fff;
-webkit-transform: rotate(45deg);
}
input[type=checkbox]:checked {
background: #327DFF;
outline: none;
border: 1px solid rgba(50,125,255,1);
}
input:focus,input:active {
outline: none;
}
input:hover {
border: 1px solid rgba(50,125,255,1);
}
</style>
</head>
<body>
<input class="abc123" type="checkbox"></input>
</body>
</html>Unfortunately, the checkbox itself cannot be styled directly, but I have discovered a way to create a visual effect while still maintaining its functionality. This method allows you to toggle the checkbox even if the cursor is not completely stationary, without the risk of inadvertently selecting text or triggering drag-and-drop actions!
The technique involves using a span "button" and incorporating text within a label, effectively concealing the checkbox and allowing you to design any background element behind it.
This solution may also be applicable to radio buttons.
This approach has been tested in IE9, FF30.0, and Chrome 40.0.2214.91, and serves as a basic example. It can be combined with background images and pseudo-elements for added customization.
label {
display: inline-block;
position: relative; /* required for absolute positioning of checkbox */
background-color: #eee;
padding: .5rem;
border: 1px solid #000;
border-radius: .375rem;
font-family: "Courier New";
font-size: 1rem;
line-height: 1rem;
}
label > input[type="checkbox"] {
display: block;
position: absolute; /* take it out of the document flow */
width: 100%;
height: 100%;
margin: -.5rem; /* offset to cover the "button" area */
cursor: pointer;
opacity: 0; /* transparent checkbox */
z-index: 666; /* ensures it stays above other elements */
}
label > input[type="checkbox"] + span {
display: inline-block;
width: 1rem;
height: 1rem;
border: 1px solid #000;
margin-right: .5rem;
}
label > input[type="checkbox"]:checked + span {
background-color: #666;
}<label>
<input type="checkbox" />
<span> </span>Label text
</label>Check out this easy method to style checkbox elements using pseudo elements or classes:
input[type=checkbox] {
position: relative;
}
input[type=checkbox]:after {
position: absolute;
top: 0;
left: 0;
/* These first three lines ensure the checkbox:after is positioned correctly */
content: '';
width: 32px;
height: 32px;
z-index: 1; /* This allows the after element to overlap the checkbox */
/* Add any additional styling here */
}
There are only two simple steps to complete
outline: 1px solid #63DDCF
border: none !important;
Easy Way to Style and Customize Checkboxes and Radio Buttons with HTML and CSS
label input {
width: 16px;
height: 16px;
vertical-align: bottom;
margin-right: 10px;
-moz-appearance: none;
-webkit-appearance:none;
-o-appearance:none;
border: 1px solid rgb(62 162 255 / 70%);
background-color: #fff;
border-radius: 4px;
position: relative;
}
label input:after {
content: '';
display: inline-block;
background-color: #3EA2FF;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border-radius: 3px;
width: 11px;
height: 11px;
overflow: hidden;
opacity: 0;
}
label input:checked:after {
opacity: 1 !important;
}<label for="F1"><input type="checkbox" id="F1">I'm Checkbox</label>I am experiencing an issue with my Bootstrap 4 form. I am using the 'form-group row' class to display labels and inputs on the same line, but when I try to prepend a $ sign before an input, it shifts the input to the next line. Below is the code ...
Currently, I am in the process of automating a web application using Selenium WebDriver. However, there is a specific scenario where the driver needs to switch to an iframe in order to interact with its elements. Despite my efforts to switch to the iframe, ...
I have a text input field where any text entered is displayed below using angular.js. However, I am trying to convert any http URL entered into a clickable link. I found reference to the solution on this Stack Overflow page. Despite successfully converting ...
Struggling to implement a simple hide and reveal effect in my JavaScript learning journey. Currently, the effect is only cancelled by clicking on another div with the same reference. Take a look at my JavaScript code: var $ = jQuery; $(document).ready(f ...
HTML: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>My First JS App</title> <lin ...
<form class="form-horizontal" role="form" id="contactf" action="http://titan.csit.rmit.edu.au/~e54061/wp/form-tester.php" method="post"> <div class="form-group"> <label class="control-label col-sm-2 lb" for="email">Email : </ ...
Looking to extract the final id of a div and convert it to a variable. <div class="margin_bot" id="itemRows2"> <p id="rowNum1">...</p> <p id="rowNum2">...</p> <p id="rowNum3">...</p> <p id="rowNum4"> ...
Within my HTML, I have arranged two images to sit adjacent to one another. Interestingly, one image happens to be taller than the other. Despite assigning a CSS property of vertical-align: middle to both images, the result is that the shorter image appears ...
It seems that there is an issue with the mcustomscrollbar "scrollTo" function not working in Chrome, although it works fine in FireFox. No errors are showing up in the console, so it appears to be a browser-specific problem. I even tested the functionali ...
I've integrated the isteven-multi-select directive for my multi-select dropdown functionality. By providing it with a list of thingsList, it generates a corresponding checkedList as I make selections. Initially, I used a button to confirm the selecti ...
After posing a similar question a few days back, I find myself encountering yet another hurdle in my project. The task at hand is to switch the background image when hovering over a button with a fade-in effect using @keyframes. However, I'm stuck bec ...
Just dipping my toes into the world of styling here, so bear with me. I'm currently working on a React app and attempting to bring an image from a file using the following code: import cup from './img/cup.png' My goal is to style it in co ...
Issue at Hand: An issue arises with my navigation bar and text block animations. The fading effect applied on the text element causes inline styles to be added, thus disrupting the media query set to hide the text on smaller screens. If you disable the s ...
As I strive to incorporate a Dark Mode feature based on the user's system preferences, I utilize the @media query prefers-color-scheme: dark. While this approach is effective, I also find it necessary to conduct additional checks using JavaScript. de ...
I have an element that, when clicked, should display additional content. However, when the headline contains a lot of text, the element does not expand vertically as it should. Thank you for your help! Check out how it looks currently This is my HTML co ...
My mobile navbar is having issues, as the button does not seem to be working at all. Initially, there was no button or navigation, but I have now added the button to the navbar. However, it still doesn't seem to be functioning properly, and I may ha ...
My webpage has a simple set of links, and one of them triggers a dropdown menu to appear on mouseover (refer to the image below). The dropdown submenu becomes visible when the link "How fast is it?" is hovered over, and remains fixed in place due to the di ...
I'm attempting to implement a crosshair-style cursor effect on a div that houses a D3 Datamap. I've managed to achieve this using jQuery, but the crosshairs appear to extend beyond the boundaries of their parent div on the bottom and right sides, ...
I'm trying to create a scrolling effect for icons on my website where they stay fixed after scrolling down a certain number of pixels. I've managed to make the header fixed after scrolling, but I'm unsure how to achieve this specific effect. ...
I have a situation in my code where I am using overflow-y: scroll to create a scroll bar with a maximum height of 40px. This setup works perfectly fine in the Chrome browser, as the scroll bar is only visible when there is overflow content (i.e. text exten ...