I am styling a checkbox to keep the user signed in, but I have ran into a problem that occurs within Firefox and IE. The checkbox looks like the following in all other browsers:
In other IE and Firefox, the checkbox looks like this:
My code is as follows:
<label id="checkbox">
<input type="checkbox" name="signinForm_keepSignedIn" id="signinForm_keepSignedIn" checked>
<span id="checkbox_span"></span>
</label>
<style>
#checkbox {
position: absolute;
left: 0px;
margin-left: 30px;
margin-top: 185px;
width: 110px;
height: 16px;
}
#signinForm_keepSignedIn {
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
appearance: none;
position: absolute;
border: none;
background-color: transparent;
}
#checkbox_span {
position: absolute;
width: 16px;
height: 16px;
display: block;
background: url("resources/images/elementBackgrounds/checkbox_unchecked.png");
cursor: pointer;
}
#signinForm_keepSignedIn:checked + #checkbox_span {
background: url("resources/images/elementBackgrounds/checkbox_checked.png");
}
</style>
If know that there is an issue with the initial "hidden" checkbox's appearance, but I don't know how to resolve the issue. What can I do to fix it?
You can add visibility: hidden property to checkbox input:
#checkbox input[type=checkbox] {
visibility: hidden;
}
Related
I want to customize the browser checkbox. When the status is checked, the icon checked.svg should be displayed instead of checkbox and the icon unchecked.svg otherwise.
Here is my code.
HTML:
<div class="checkbox-custom">
<input type="checkbox"/>
<div class="checkmark">
<img src="#/assets/images/icons/checkbox/unchecked.svg" class="unchecked"/>
<img src="#/assets/images/icons/checkbox/checked.svg" class="checked"/>
</div>
</div>
SASS:
.checkbox-custom {
position: absolute;
width: 28px;
height: 28px;
left: 0;
top: 0;
// Hide default browser checkbox
input[type=checkbox] {
display: none;
}
input[type=checkbox] + .checkmark {
position: absolute;
left: 3.5px;
top: 3.5px;
right: 3.5px;
bottom: 3.5px;
display: inline-block;
cursor: pointer;
img {
width: 21px;
height: 21px;
}
.checked {
display: none;
}
}
input[type=checkbox]:checked + .checkmark {
.checked {
display: block;
}
.unchecked {
display: none;
}
}
}
When i click on the checkbox, nothing happens. What could be the error?
This can be accomplished without any javascript. Clicking the label element toggles the checkbox inside of it, so with some clever css, we can change the display based on the input's checked state.
input[type=checkbox] {
display: none;
}
.label {
border: 1px solid #000;
display: inline-block;
padding: 3px;
/* background: url("unchecked.png") no-repeat left center; */
/* padding-left: 15px; */
}
input[type=checkbox]:checked + .label {
background: #f00;
color: #fff;
/* background-image: url("checked.png"); */
}
<label><input type="checkbox"><span class="label">Check me</span></label>
Change the .label styles to use background-image of your choice (and position it to the left of your text).
http://jsfiddle.net/pKM3x/
CSS:
.checkbox{
width: 23px;
height: 21px;
background: transparent url(http://i.stack.imgur.com/S4p2R.png ) no-repeat 0 50%
}
.checked{
background: transparent url(http://i.stack.imgur.com/S4p2R.png ) no-repeat 80% 50%
}
HTML:
<div class="checkbox">
</div>
JQUERY:
$(".checkbox").click(function(){
$(this).toggleClass('checked')
});
This also possible to do with pure JS.
I have come up against a very annoying CSS issue while trying to get a project working cross-browser (not bothered about IE, it's only a hobby project, but it would be nice to get it working on all modern browsers at the very least). It relates to some checkboxes which I wish to apply custom styles to - I know you can't do very much with the standard HTML <input type="checkbox"> so I have done what is recommended in many places, and used a ::before pseudo-element. And I was pleased with the result in Chrome. Imagine my surprise when I find that my custom checkbox simply doesn't display at all in Firefox!
I've been playing with this for a few hours and have stripped it right back to the very root of the problem - and it's something to do with the checkbox itself, rather than any other CSS it's interacting with. Here's the bare minimum example:
input[type="checkbox"] {
visibility: hidden;
}
input[type="checkbox"]::before {
visibility: visible;
content: "";
display: block;
width: 1.1em;
height: 1.1em;
color: #eddc23;
border: 1px solid #eddc23;
background-color: #540123;
border-radius: 35%;
line-height: 1.27;
text-align: center;
cursor: pointer;
}
input[type="checkbox"]:checked::before {
content: "\2713";
}
<input type="checkbox">
This should show a dark red checkbox which has a yellow tick when selected. It works perfectly on Chrome and Opera, but not at all on Firefox or Edge. (Here's a CodePen link of the same in case the Stack Overflow snippet somehow exhibits different behaviour). CSS isn't one of my strong points and despite a few hours of experimenting and googling, I'm baffled.
Would appreciate any pointers, not only as to how to get this working cross-browser, but as to why it's not working on FF/Edge (inspecting the element on Firefox shows no sign of a ::before pseudo-element at all. I've also ruled out it being to do with the empty content property, since changing that to real text fails to make it visible in the browsers concerned).
Sometimes with labels you can solve this type of problems
input[type="checkbox"] {
display: none;
}
span {
visibility: visible;
content: "";
display: block;
width: 1.1em;
height: 1.1em;
color: #eddc23;
border: 1px solid #eddc23;
background-color: #540123;
border-radius: 35%;
line-height: 1.27;
text-align: center;
cursor: pointer;
}
input[type="checkbox"]:checked + label span::before {
content: "\2713";
}
<input type="checkbox" id="checkbox">
<label for="checkbox">
<span></span>
</label>
Just to record it in brief, what I ended up doing was putting a <div> as the next sibling of the checkbox, hiding the checkbox with opacity: 0;, and positioning the div on top of the checkbox but with lower z-index. This means that the "fake" checkbox responds in the same way a real one would, and by keeping the actual checkbox in the DOM hopefully this would still score reasonably on accessibility.
You should reset the appearance:
input[type=checkbox] {
/* Reset */
-webkit-appearance: none;
appearance: none;
background-color: #fff;
}
But the best way is here: https://moderncss.dev/pure-css-custom-checkbox-style/
Example snippet:
/* Checkboxes */
input[type=checkbox] {
/* Reset */
-webkit-appearance: none;
appearance: none;
background-color: #fff;
width: 0;
height: 0;
margin: 0;
margin-right: 25px;
position: relative;
text-align: center;
font-size: 16px;
}
input[type=checkbox]:focus {
box-shadow: none;
outline: none;
}
input[type=checkbox]::before {
content: '';
position: absolute;
top: -16px;
display: block;
width: 20px;
height: 20px;
border: 1px solid #23151d;
background: #fff;
box-sizing: content-box;
border-radius: 3px;
}
input[type=checkbox]:checked::before {
border: 1px solid #e63244;
background: transparent;
background: #e6324403;
}
input[type=checkbox]::after {
content: '✓';
text-indent: 4px;
position: absolute;
top: -14px;
display: none;
width: 20px;
height: 20px;
box-sizing: content-box;
text-align: center;
}
input[type=checkbox]:checked::after {
display: block;
color: #e63244;
}
/* / Checkboxes */
<p>
<input type="checkbox" checked>
<input type="checkbox" checked>
<input type="checkbox" checked>
</p>
/* radio buttons */
.radio-container {
display: block;
position: relative;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
padding-left: 1.5em;
margin-bottom: 0.75em;
}
.radio-container input {
position: absolute;
opacity: 0;
cursor: pointer;
}
.radio-container input:checked .radio:after {
display: block;
}
.radio-container:hover .radio {
background: gray;
}
/* custom radio button */
.radio {
position: absolute;
top: 0;
left: 0;
height: 1em;
width: 1em;
background-color: transparent;
border: 1px solid gray;
border-radius: 50%;
}
.radio:after {
content: "";
position: absolute;
display: none;
top: 0;
left: 0;
width: 0.25em;
height: 0.25em;
border-radius: 50%;
background: white;
}
<form class="recharge">
<div>
<label class="radio-container" for="subscribe">
<input type="radio" id="one-time" name="recharge">
<span class="radio"></span>
Subscribe & Save 10%
</label>
</div>
<div>
<label class="radio-container" for="one-time">
<input type="radio" id="one-time" name="recharge">
<span class="radio"></span>
One Time Purchase
</label>
</div>
</form>
I have added custom styles to radio buttons on my website to give them a custom style. My HTML and CSS code is attached in the above snippet. However, now when I click on an input it does not select. I would ideally like to have this working without a JS component.
Please find the solution to your problem:
Codepen link to the solution
One of the issue I find was, you have not specified the color after the radio button is clicked and also the sibling selector was missing. I have added these lines specifically:
.radio-container input:checked ~ .radio {
background-color: #2196F3;
}
Hope it helps!! Thanks.
I have an issue with my radio buttons, I try to put a border color when it is checked, nothing happens. I tried to read other topics about it, even tried to paste the answers I've found but it still doesn't change the border.
It's probably some silly mistake that I made but I just can't find it, does anyone have the answer?
Thanks a lot.
input[type="radio"]:checked:before {
background: green;
}
input[type="radio"]:checked {
border-color: orange;
}
<div id="radio">
<label>
<input type="radio" name="sexe" value="Homme" id="homme">
Homme
</label>
<label>
<input type="radio" name="sexe" value="Femme" id="femme">
Femme
</label>
</div>
You can not really change the style of basic radio button.
You have to create a custom radio button css.
Try this css:
input[type='radio'] {
-webkit-appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
outline: none;
border: 3px solid gray;
}
input[type='radio']:before {
content: '';
display: block;
width: 60%;
height: 60%;
margin: 20% auto;
border-radius: 50%;
}
input[type="radio"]:checked:before {
background: green;
}
input[type="radio"]:checked {
border-color: orange;
}
It works for me. I hope I can help.
Apparently, browsers don't allow much custom styling on checkboxes/radio buttons. - Jeremy Thille's comment
You could however, create your own radio button through css, an example of this can be found in this JsFiddle
What happens here:
We hide the borswer's radio input
We style create a custom radio button through css .checkmark
We show / hide a custom checked indicator using :checked, :after and the ~ General sibling combinator
Lastly, we style the checked indicator
Example found here
NOTE, as this is an example, it may be more than you require
The code
/* The container */
.container {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide the browser's default radio button */
.container input {
position: absolute;
opacity: 0;
cursor: pointer;
}
/* Create a custom radio button */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
border-radius: 50%;
}
/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
background-color: #ccc;
}
/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmark {
background-color: #2196F3;
}
/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the indicator (dot/circle) when checked */
.container input:checked ~ .checkmark:after {
display: block;
}
/* Style the indicator (dot/circle) */
.container .checkmark:after {
top: 9px;
left: 9px;
width: 8px;
height: 8px;
border-radius: 50%;
background: white;
}
<label class="container">Homme
<input type="radio" checked="checked" name="sexe">
<span class="checkmark"></span>
</label>
<label class="container">Femme
<input type="radio" checked="checked" name="sexe">
<span class="checkmark"></span>
</label>
Hope this helps getting to your desired result
Is it possible to apply a style in the inner "up arrow" and "down arrow" of a <input type="number"> in CSS? I would like to change the background of the up arrow to blue and the down arrow to red. Any ideas?
UPDATE 17/03/2017
Original solution won't work anymore. The spinners are part of shadow dom. For now just to hide in chrome use:
input[type=number]::-webkit-inner-spin-button {
-webkit-appearance: none;
}
<input type="number" />
or to always show:
input[type=number]::-webkit-inner-spin-button {
opacity: 1;
}
<input type="number" />
You can try the following but keep in mind that works only for Chrome:
input[type=number]::-webkit-inner-spin-button {
-webkit-appearance: none;
cursor:pointer;
display:block;
width:8px;
color: #333;
text-align:center;
position:relative;
}
input[type=number]::-webkit-inner-spin-button:before,
input[type=number]::-webkit-inner-spin-button:after {
content: "^";
position:absolute;
right: 0;
}
input[type=number]::-webkit-inner-spin-button:before {
top:0px;
}
input[type=number]::-webkit-inner-spin-button:after {
bottom:0px;
-webkit-transform: rotate(180deg);
}
<input type="number" />
For Mozilla
input[type=number] {
-moz-appearance: textfield;
appearance: textfield;
margin: 0;
}
For Chrome
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
I modified #LcSalazar's answer a bit... it's still not perfect because the background of the default buttons can still be seen in both Firefox, Chrome & Opera (not tested in Safari); but clicking on the arrows still works
Notes:
Adding pointer-events: none; allows you to click through the overlapping button, but then you can not style the button while hovered.
The arrows are visible in Edge, but don't work because Edge doesn't use arrows. It only adds an "x" to clear the input.
.number-wrapper {
position: relative;
}
.number-wrapper:after,
.number-wrapper:before {
position: absolute;
right: 5px;
width: 1.6em;
height: .9em;
font-size: 10px;
pointer-events: none;
background: #fff;
}
.number-wrapper:after {
color: blue;
content: "\25B2";
margin-top: 1px;
}
.number-wrapper:before {
color: red;
content: "\25BC";
margin-bottom: 5px;
bottom: -.5em;
}
<span class='number-wrapper'>
<input type="number" />
</span>
A little different to the other answers, using a similar concept but divs instead of pseudoclasses:
input {
position: absolute;
left: 10px;
top: 10px;
width: 50px;
height: 20px;
padding: 0px;
font-size: 14pt;
border: solid 0.5px #000;
z-index: 1;
}
.spinner-button {
position: absolute;
cursor: default;
z-index: 2;
background-color: #ccc;
width: 14.5px;
text-align: center;
margin: 0px;
pointer-events: none;
height: 10px;
line-height: 10px;
}
#inc-button {
left: 46px;
top: 10.5px;
}
#dec-button {
left: 46px;
top: 20.5px;
}
<input type="number" value="0" min="0" max="100"/>
<div id="inc-button" class="spinner-button">+</div>
<div id="dec-button" class="spinner-button">-</div>
I've been struggling with this on mobile and tablet. My solution was to use absolute positioning on the spinners, so I'm just posting it in case it helps anyone else:
<html><head>
<style>
body {padding: 10px;margin: 10px}
input[type=number] {
/*for absolutely positioning spinners*/
position: relative;
padding: 5px;
padding-right: 25px;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
opacity: 1;
}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
-webkit-appearance: inner-spin-button !important;
width: 25px;
position: absolute;
top: 0;
right: 0;
height: 100%;
}
</style>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=0"/>
</head>
<body >
<input type="number" value="1" step="1" />
</body></html>
Crazy idea...
You could play around with some pseudo elements, and create up/down arrows of css content hex codes. The only challange will be to precise the positioning of the arrow, but it may work:
input[type="number"] {
height: 100px;
}
.number-wrapper {
position: relative;
}
.number-wrapper:hover:after {
content: "\25B2";
position: absolute;
color: blue;
left: 100%;
margin-left: -17px;
margin-top: 12%;
font-size: 11px;
}
.number-wrapper:hover:before {
content: "\25BC";
position: absolute;
color: blue;
left: 100%;
bottom: 0;
margin-left: -17px;
margin-bottom: -14%;
font-size: 11px;
}
<span class='number-wrapper'>
<input type="number" />
</span>
the above code for chrome is working fine. i have tried like this in mozila but its not working. i found the solution for that
For mozila
input[type=number] {
-moz-appearance: textfield;
appearance: textfield;
margin: 0;
}
Thanks
Sanjib
The css to modify the spinner arrows is obtuse and unreliable cross-browser.
The most stable option I have found, is to absolutely position an image with pointer-events: none; on top of the spinners.
Untested in Edge but works in all other browsers.
Tested in Edge, this works to hide the arrows in Edge...
input[type=number]::-webkit-inner-spin-button, ::-webkit-outer-spin-button{
opacity: 0;
}