Why box-sizing doesn't work for radio buttons? - html

I tried to make a custom radio button, but I can't understand why box-sizing doesn't work.
Chrome:
FireFox:
What am I missing?
HTML:
<input class="radio-btn" type="radio" name="a"/>
<input class="radio-btn" type="radio" name="a"/>
<input class="radio-btn" type="radio" name="a"/>
<input class="radio-btn" type="radio" name="a"/>
<input class="radio-btn" type="radio" name="a"/>
CSS:
.radio-btn {
appearance: none;
box-sizing: border-box;
width: 0;
height: 0;
border-radius: 50%;
border: 6px solid #fff;
box-shadow: 0 0 0 2px #000;
transition: .2s border-color;
cursor: pointer;
}
.radio-btn:checked {
width: 12px;
height: 12px;
border: 3px solid #000;
box-shadow: 0 0 1px 2px #000;
}
.radio-btn:hover {
box-shadow: 0 0 1px 2px #000;
}
.radio-btn:focus {
outline: 0;
}
http://jsfiddle.net/u86xboqd/


You set your width and height in your .radio-btn css to 0. If you set each to 12px (to match your other styles) I think it will look the way you want it to.
.radio-btn {
width: 12px;
height: 12px;
}


Hard to determine without seeing code (not everyone can access codepen) but it may be because you also need to set display on the element to a block calculable value (so it respects height/width), e.g:
input{
display:inline-block;
}
You may also wish to check the relevant compatability

Related

Cannot set white background to HTML input in Mozilla

A strange behavior prevents me from setting white color for an HTML input element's background color (background property) in Mozilla Firefox (it switches to a yellow color). Other colors works fine (black, green). Does anybody know why?
input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: 1px solid #A6A6A633;
border-radius: 2px;
opacity: 1;
background: white;
color: #9B9B9B;
}
<div class="form-group">
<label for="username">User Name: </label>
<input type="text" id="username" [(ngModel)]="username" placeholder="Enter User Name" name="username">
</div>
EDIT: Since it turned out the problem is caused by Mozilla's autocomplete, it's not a problem anymore since in normal use it changes the background as expected.

In your example the background in perfectly white. I think, there is some other code, that affects your input. Try to make it more specific using the ID #username.
Or, you can use !important rule.
UPDATED
Added the third way. It may be an autocomplete background of browther. Try the code below.
input#username {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: 1px solid #A6A6A633;
border-radius: 2px;
opacity: 1;
background: #fff !important;
color: #9B9B9B;
}
input#username:-moz-autofill,
input#username:-moz-autofill-preview,
input#username:-webkit-autofill {
filter: none;
background: #fff !important;
}
<div class="form-group">
<label for="username">User Name: </label>
<input type="text" id="username" [(ngModel)]="username" placeholder="Enter User Name" name="username">
</div>

UPDATE
the code listed bellow is not necessary as mentioned in the comments. however refreshing cache helped as the problem came of autocomplete.
OLD
Use background-color: white; and not Background: white;
input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: 1px solid #A6A6A633;
border-radius: 2px;
opacity: 1;
background-color: white;
color: #9B9B9B;
}

How to display radio buttons as <div>

I want to display my radio buttons as so that i can give style sheet and make div clickable.
here are my radio buttons.
and I want to show them like this.
div as radio
This is what I have tried but did not work.
HTML
<div class="radio-toolbar">
<table>
<tr>
<td><input type="radio" id="radioone" name="product" value="first">
<label for="radioone">50</label></td>
<td><input type="radio" id="radiotwo" name="product" value="second">
<label for="radiotwo">100</label></td>
<td><input type="radio" id="radiothree" name="product" value="third">
<label for="radiothree">500</label></td>
</div>
CSS
.radio-toolbar input[type='radio']:focus + label {
border: 2px thin blue;
}
.radio-toolbar input[type='radio']:checked + label {
background-color: #86b1f7;
border-color: #4c4;
color: white;
}
So how can I achive this
Small help will be appreciated.
Thanks in advance :)

I had do this before.and I have the code preperd.I hope It will be useful for you.
.switch-field {
display: flex;
overflow: hidden;
direction: ltr;
float: right;
text-align:right;
}
.switch-field input {
position: absolute !important;
clip: rect(0, 0, 0, 0);
height: 1px;
width: 1px;
border: 0;
overflow: hidden;
}
.switch-field label {
/*width: 33.33%;*/
background-color: transparent;
color: #666666;
font-size: 14px;
line-height: 1;
text-align: center;
padding: 10px 12px;
margin-left: 0px;
/*margin-right: -1px;*/
border: 1px solid #ddd;
transition: all 0.1s ease-in-out;
}
.switch-field label:hover {
cursor: pointer;
}
.switch-field input:checked + label {
background-color: #F4F5F9;
box-shadow: none;
border-color: #3E7DE7;
color: #3E7DE7;
}
.switch-field label:first-of-type {
border-radius: 2px 0px 0px 2px;
}
.switch-field label:last-of-type {
border-radius: 0px 2px 2px 0px;
}
<div class="switch-field">
<input class="uk-radio" id="radio-six" type="radio" value="admin" name="user_type" checked>
<label for="radio-six">admin</label>
<input class="uk-radio" id="radio-seven" type="radio" value="user" name="user_type" >
<label for="radio-seven">user</label>
</div>

Here is one way you can customize your radio buttons.
.radio-toolbar .radio-item {
position: relative;
display: inline-block;
vertical-align: top;
margin: 15px 5px;
}
.radio-item input[type="radio"] {
position: absolute;
width: 0;
height: 0;
top: 0;
left: 0;
}
.radio-item label {
padding: 10px;
color: #fff;
border-radius: 10px;
background-color: grey;
border: 1px solid #000;
}
.radio-item input[type="radio"]:checked ~ label {
border-color: #f00;
}
<div class="radio-toolbar">
<div class="radio-item">
<input type="radio" id="radioone" name="product" value="first">
<label for="radioone">50</label>
</div>
<div class="radio-item">
<input type="radio" id="radiotwo" name="product" value="second">
<label for="radiotwo">100</label>
</div>
<div class="radio-item">
<input type="radio" id="radiothree" name="product" value="third">
<label for="radiothree">500</label>
</div>
</div>
Please let me know if this helps.

You need to hide the radio buttons and the left over label is still "clickable"
.radio-toolbar input[type="radio"] {
display: none;
}
I put all the working code on codepen here: https://codepen.io/stormingorman-the-vuer/pen/ExjKRvz

Try Like This. Make Your radio-toolbar input, width: 0;
also make your radio-toolbar label Like this
.radio-toolbar label {
background-color: #A9A9A9;
padding: 10px 20px;
font-size: 16px;
border-radius: 4px;
}

How to fix border jagged isuue of ::before pseudo element for radio buttons?

Here's the Example of jsfiddle
I have created the dummy radio buttons with my custom CSS,
As you can see in above example border is looking jagged.
I have added below custom css for box shadow
input[type='radio']:checked + label:before {
background: #3A3A3A;
box-shadow: inset 0px 0px 0px 4px #DEDEDE;
}
Here you can see the difference
without border-radius it seems like --
with border-radius it seems like --
You can see the difference in these two images,
Please see above fiddle example and give some suggestions.

Add margin to the li
ul.gfield_radio li{
padding-bottom: 5px;
}
.gfield_radio input[type='radio']+label:before {
content: '';
background: #DEDEDE;
border: 1px solid #359947;
display: inline-block;
vertical-align: middle;
width: 40px;
height: 40px;
padding: 2px;
margin-right: 10px;
text-align: center;
border-radius: 50%;
box-sizing: border-box;
}
.gfield_radio input[type='radio'] {
display: none;
}
.gfield_radio input[type='radio']:checked+label:before {
background: #3A3A3A;
box-shadow: inset 0px 0px 0px 4px #DEDEDE;
}
ul {
list-style: none;
margin-left: 0;
}
ul.gfield_radio li {
padding-bottom: 5px;
}
ul.gfield_checkbox li label {
display: inline-block;
line-height: 1.2;
}
<ul class="gfield_radio" id="input_1_3">
<li class="gchoice_1_3_0">
<input name="input_3" type="radio" value="First Choice" id="choice_1_3_0" tabindex="2">
<label for="choice_1_3_0" id="label_1_3_0">
First Choice
</label>
</li>
<li class="gchoice_1_3_1">
<input name="input_3" type="radio" value="Second Choice" id="choice_1_3_1" tabindex="3">
<label for="choice_1_3_1" id="label_1_3_1">
Second Choice
</label>
</li>
<li class="gchoice_1_3_2">
<input name="input_3" type="radio" value="Third Choice" id="choice_1_3_2" tabindex="4">
<label for="choice_1_3_2" id="label_1_3_2">
Third Choice
</label>
</li>
</ul>

how to achieve following using css ( digits input )

I am trying to achieve following feature:
It's an input box, has 4 digits, once clicked, user can input 4 digits.
It's part of a mobile app.
Currently what I have achieved is : example, note that for some reason,
outline: none; works fine in my app but not work in this jsFiddle example.
My question is how to draw the 3 separation bar and also display those digits
just fit their position within it?
Is it achievable using css?
below are code:
<form id="login" class="ui-shadow-around ui-corner-all-input" data-enhance="false">
<div data-role="fieldcontain">
<span>
<input type="tel" name="retailer_pin" maxlength="4" class="numbersOnly" required="" placeholder="" style="outline: none;">
</span>
</div>
<input type="submit" class="submitHidden">
</form>
css:
.ui-corner-all-input {
-webkit-background-clip: padding;
background-clip: padding-box;
-webkit-border-radius: .6em /*{global-radii-blocks}*/;
border-radius: .6em /*{global-radii-blocks}*/;
width: 35%;height: 3.5em; margin: 0 auto; margin-bottom: 44px;
margin-top: 24px;
}
.ui-shadow-around {
-moz-box-shadow: 0px 0px 4px /*{global-box-shadow-size}*/ rgba(0,0,0,0.4) /*{global-box-shadow-color}*/;
-webkit-box-shadow: 0px 0px 4px /*{global-box-shadow-size}*/ rgba(0,0,0,0.4) /*{global-box-shadow-color}*/;
box-shadow: 0px 0px 4px /*{global-box-shadow-size}*/ rgba(0,0,0,0.4) /*{global-box-shadow-color}*/;
border: 1px #b6b6b6 solid;
}
*:not(input):not(textarea) {
-webkit-user-select: none;
-webkit-touch-callout: none;
}
FORM[data-enhance="false"] INPUT, textarea {
outline: none;
}
FORM[data-enhance="false"] SPAN {
overflow: hidden;
display: block;
padding: 0 10px 0 0px;
text-align: left;
}
.submitHidden {
visiblity: hidden;
position: absolute;
opacity: 0;
}

Here is my take on the problem.
It uses a proper input element (please don't make the life of your users harder than it already is) and a transparent background to render 4 blocks in the background.
.input-widget {
vertical-align: top;
margin-left: 1rem;
font-size: 2rem;
display: inline-block;
position: relative;
}
.input-widget .input {
width: 8rem;
font-size: inherit;
font-family: inherit;
letter-spacing: 5px;
background-color: transparent;
border: none;
-moz-appearance: textfield;
}
.input-widget .input::-webkit-inner-spin-button,
.input-widget .input::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.input-widget .digit-background {
position: absolute;
top: 1px;
left: 0;
z-index: -1;
}
.input-widget .digit-background .digit {
display: inline-block;
float: left;
}
.input-widget .digit-background .digit::before {
content: '0';
color: lightgray;
background-color: currentColor;
display: inline-block;
padding: 1px;
margin: -1px 4px 0 -1px;
}
<div class="input-widget">
<input type="number" max="9999" class="input" value="01234">
<div class="digit-background">
<div class="digit"></div>
<div class="digit"></div>
<div class="digit"></div>
<div class="digit"></div>
</div>
</div>
And a SCSS version is here: https://jsfiddle.net/cburgmer/0xgtdyLj/1/

You could do it like this:
HTML:
<table>
<tr>
<td><input class="clock" type="text" maxlength="1" size="1" onkeyup="next(2)"></td>
<td><input id="2" class="clock" type="text" maxlength="1" size="1" onkeyup="next(3)"></td>
<td><input id="3" class="clock" type="text" maxlength="1" size="1" onkeyup="next(4)"></td>
<td><input id="4" class="clock" type="text" maxlength="1" size="1"></td>
</tr>
CSS:
.clock {
color:darkgray;
border-style:none;
width:40px;
height:60px;
font-size:60px;
}
td{
border:2px solid darkgray
}
table {
border-collapse:collapse;
}
JavaScript:
function next(next) {
document.getElementById(next).focus();
}
Link: http://jsbin.com/uhaHunuq/1/edit?html,output

Maybe you can use four text input items and put them in a small table. With JavaScript, make each text box take one character and give the focus state to the next text box. The lines could be done with the table border and box. Use the CSS to hide the text box frame.

How to change checkbox's border style in CSS?

How can I change checkbox (input) border's style? I've put border:1px solid #1e5180 upon it, but in FireFox 3.5, nothing happens!

I suggest using "outline" instead of "border". For example: outline: 1px solid #1e5180.

You should use
-moz-appearance:none;
-webkit-appearance:none;
-o-appearance:none;
Then you get rid of the default checkbox image/style and can style it. Anyway a border will still be there in Firefox

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.

You can use box shadows to fake a border:
-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);

Here's my version that uses FontAwesome for checkbox ticker, I think FontAwesome is used by almost everybody so it's safe to assume you have it too. Not tested in IE/Edge and I don't think anyone cares.
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">

Here is a pure CSS (no images) cross-browser solution based on Martin's Custom Checkboxes and Radio Buttons with CSS3 LINK: http://martinivanov.net/2012/12/21/imageless-custom-checkboxes-and-radio-buttons-with-css3-revisited/
Here is a jsFiddle: http://jsfiddle.net/DJRavine/od26wL6n/
I have tested this on the following browsers:
FireFox (41.0.2) (42)
Google Chrome (46.0.2490.80 m)
Opera (33.0.1990.43)
Internet Explorer (11.0.10240.16431 [Update Versions: 11.0.22])
Microsoft Edge (20.10240.16384.0)
Safari Mobile iPhone iOS9 (601.1.46)
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;
}
label:hover span::before,
label:hover span::before
{
-moz-box-shadow: 0 0 2px #ccc;
-webkit-box-shadow: 0 0 2px #ccc;
box-shadow: 0 0 2px #ccc;
}
label:hover span,
label:hover span
{
color: #000;
}
input[type="radio"] + span::before,
input[type="checkbox"] + span::before
{
content: "";
width: 12px;
height: 12px;
margin: 0 4px 0 0;
border: solid 1px #a8a8a8;
line-height: 14px;
text-align: center;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border-radius: 100%;
background: #f6f6f6;
background: -moz-radial-gradient(#f6f6f6, #dfdfdf);
background: -webkit-radial-gradient(#f6f6f6, #dfdfdf);
background: -ms-radial-gradient(#f6f6f6, #dfdfdf);
background: -o-radial-gradient(#f6f6f6, #dfdfdf);
background: radial-gradient(#f6f6f6, #dfdfdf);
}
input[type="radio"]:checked + span::before,
input[type="checkbox"]:checked + span::before
{
color: #666;
}
input[type="radio"]:disabled + span,
input[type="checkbox"]:disabled + span
{
cursor: default;
-moz-opacity: .4;
-webkit-opacity: .4;
opacity: .4;
}
input[type="checkbox"] + span::before
{
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
}
input[type="radio"]:checked + span::before
{
content: "\2022";
font-size: 30px;
margin-top: -1px;
}
input[type="checkbox"]:checked + span::before
{
content: "\2714";
font-size: 12px;
}
input[class="blue"] + span::before
{
border: solid 1px blue;
background: #B2DBFF;
background: -moz-radial-gradient(#B2DBFF, #dfdfdf);
background: -webkit-radial-gradient(#B2DBFF, #dfdfdf);
background: -ms-radial-gradient(#B2DBFF, #dfdfdf);
background: -o-radial-gradient(#B2DBFF, #dfdfdf);
background: radial-gradient(#B2DBFF, #dfdfdf);
}
input[class="blue"]:checked + span::before
{
color: darkblue;
}
input[class="red"] + span::before
{
border: solid 1px red;
background: #FF9593;
background: -moz-radial-gradient(#FF9593, #dfdfdf);
background: -webkit-radial-gradient(#FF9593, #dfdfdf);
background: -ms-radial-gradient(#FF9593, #dfdfdf);
background: -o-radial-gradient(#FF9593, #dfdfdf);
background: radial-gradient(#FF9593, #dfdfdf);
}
input[class="red"]:checked + span::before
{
color: darkred;
}
<label><input type="radio" checked="checked" name="radios-01" /><span>checked radio button</span></label>
<label><input type="radio" name="radios-01" /><span>unchecked radio button</span></label>
<label><input type="radio" name="radios-01" disabled="disabled" /><span>disabled radio button</span></label>
<br/>
<label><input type="radio" checked="checked" name="radios-02" class="blue" /><span>checked radio button</span></label>
<label><input type="radio" name="radios-02" class="blue" /><span>unchecked radio button</span></label>
<label><input type="radio" name="radios-02" disabled="disabled" class="blue" /><span>disabled radio button</span></label>
<br/>
<label><input type="radio" checked="checked" name="radios-03" class="red" /><span>checked radio button</span></label>
<label><input type="radio" name="radios-03" class="red" /><span>unchecked radio button</span></label>
<label><input type="radio" name="radios-03" disabled="disabled" class="red" /><span>disabled radio button</span></label>
<br/>
<label><input type="checkbox" checked="checked" name="checkbox-01" /><span>selected checkbox</span></label>
<label><input type="checkbox" name="checkbox-02" /><span>unselected checkbox</span></label>
<label><input type="checkbox" name="checkbox-03" disabled="disabled" /><span>disabled checkbox</span></label>
<br/>
<label><input type="checkbox" checked="checked" name="checkbox-01" class="blue" /><span>selected checkbox</span></label>
<label><input type="checkbox" name="checkbox-02" class="blue" /><span>unselected checkbox</span></label>
<label><input type="checkbox" name="checkbox-03" disabled="disabled" class="blue" /><span>disabled checkbox</span></label>
<br/>
<label><input type="checkbox" checked="checked" name="checkbox-01" class="red" /><span>selected checkbox</span></label>
<label><input type="checkbox" name="checkbox-02" class="red" /><span>unselected checkbox</span></label>
<label><input type="checkbox" name="checkbox-03" disabled="disabled" class="red" /><span>disabled checkbox</span></label>

For Firefox, Chrome and Safari, nothing happens.
For IE the border is applied outside the checkbox (not as part of the checkbox), and the "fancy" shading effect in the checkbox is gone (displayed as an oldfashioned checkbox).
For Opera the border style is actually applying the border on the checkbox element.
Opera also handles other stylings on the checkbox better than other browsers: color is applied as the color of the tick, background-color is applied as background color inside the checkbox (IE applies the background as if the checkbox was inside a <div> with background)).
Conclusion
The easiest solution is to wrap the checkbox inside a <div> like others have suggested.
If you want to completely control the appearance you will have to go with the advanced image/javascript approach, also meantiond by others.

I'm outdated I know.. But a little workaround would be to put your checkbox inside a label tag, then style the label with a border:
<label class='hasborder'><input type='checkbox' /></label>
then style the label:
.hasborder { border:1px solid #F00; }

Styling checkboxes (and many other input elements for that mater) is not really possible with pure css if you want to drastically change the visual appearance.
Your best bet is to implement something like jqTransform does which actually replaces you inputs with images and applies javascript behaviour to it to mimic a checkbox (or other element for that matter)

No, you still can't style the checkbox itself, but I (finally) figured out how to style an illusion while keeping the functionality of clicking a checkbox. It means that you can toggle it even if the cursor isn't perfectly still without risking selecting text or triggering drag-and-drop!
The example is using a span "button" as well as some text in a label, but it gives you the idea of how you can make the checkbox invisible and draw anything behind it.
This solution probably also fits radio buttons.
The following works in IE9, FF30.0 and Chrome 40.0.2214.91 and is just a basic example. You can still use it in combination with background images and pseudo-elements.
http://jsfiddle.net/o0xo13yL/1/
label {
display: inline-block;
position: relative; /* needed for checkbox absolute positioning */
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; /* remove it from the flow */
width: 100%;
height: 100%;
margin: -.5rem; /* negative the padding of label to cover the "button" */
cursor: pointer;
opacity: 0; /* make it transparent */
z-index: 666; /* place it on top of everything else */
}
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>

<!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>

Here is a simple way (to use before or after pseudo elements / classes):
input[type=checkbox] {
position: relative;
}
input[type=checkbox]:after {
position: absolute;
top: 0;
left: 0;
/* Above three lines allow the checkbox:after position at checkbox's position */
content: '';
width: 32px;
height: 32px;
z-index: 1; /* This allows the after overlap the checkbox */
/* Anything you want */
}

It's actually just two things you have to do
outline: 1px solid #63DDCF
border: none !important;

put it in a div and add border to the div

<div style="border-style: solid;width:13px">
<input type="checkbox" name="mycheck" style="margin:0;padding:0;">
</input>
</div>