Hello im trying to allign vertically text next to my radio-button, but its getting crashed.
.radio {
cursor: pointer;
display: inline-flex;
}
.cui-a-radio-button__input {
display: none;
}
.cui-a-radio-button__input:disabled + .cui-a-radio-button-style {
opacity: 0.3;
}
.cui-a-radio-button-style {
border-radius: 50%;
margin-right: 10px;
box-sizing: border-box;
padding: 2px;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
}
<label for="Radio3" class="radio">
<input type="radio" name="RadioField" id="Radio3" class="cui-a-radio-button__input" disabled>
<div class="cui-a-radio-button-style">disabled</div>
</label>
I have tried to add "vertical allign: top" to label but id does not work.
Result i have:
Try adding align-items:center on your radio class!
for displaying a text beside radio button, just place the text inside your input tag. label tag is for another purpose.
<input type="radio" disabled> disabled </input>
Related
Radio buttons are showing like the attached image. How to align the Label and the button.
input[type="radio"] {
width: 18px;
min-width: auto;
display: inline-block;
}
<label><input type="radio" name="myRadios1" id="myRadios1" value="Yes" ONCLICK="show_info_block(this.value)" />Yes</label>
<label><input type="radio" name="myRadios2" id="myRadios2" value="No" ONCLICK="show_info_block(this.value)" />No</label>
I have 2 solutions but i think one of them is better:
first Dont wrap you <input> in <label> and do this instead:
{label}
then for css :
.label-container {
display: flex;
align-items: center;
}
input[type='radio'] {
margin: auto;
}
you can use display flex and align-items: center for each label with your own code
but I think it's not clean at all.
How to put the checkbox and label in one line?
<style>
#supports (zoom:2) {
input[type=checkbox]{
zoom: 2;
}
}
#supports not (zoom:2) {
input[type=checkbox]{
transform: scale(2);
margin: 15px;
}
}
label{
/* fix vertical align issues */
display: inline-block;
vertical-align: top;
margin-top: 10px;
color:black;
}
</style>
<input type="checkbox" name="check_gdpr" id="check_gdpr" checked />
<label for="cc">Inform me by e-mail</label>
Wrap the input in the label:
<label><input type="checkbox" name="check_gdpr" id="check_gdpr" checked>Inform me by e-mail</label>
just put your checkbox and label in span
example<span class="get-inline"><lable>Inform me by e-mail</lable></span>
<span class="get-inline"><input type="checkbox" name="check_gdpr" id="check_gdpr" checked /> </span>
now add css like this:
.get-inline{display:inline-block;}
i hope it will work
Update
vertical-align: top
to
vertical-align: middle
in your CSS for label and it should work just fine.
I am trying to customize the look of my checkboxes using font-awesome and to have all the text of the labels correctly indented. I have customized the look of the checkboxes which makes the usual approaches to indent the text not working as I am hiding the actual checkbox (see the CSS below).
Currently, I obtain the following (left) while I would like the one on the right:
I used the following code (see the JSFiddle):
CSS
Inspired by this simple CSS checkboxes, I use the following to format my checkboxes with font-awesome:
input[type=checkbox] {
display:none;
}
input[type=checkbox] + label:before {
font-family: FontAwesome;
display: inline-block;
content: "\f096";
letter-spacing: 10px;
cursor: pointer;
}
input[type=checkbox]:checked + label:before {
content: "\f046";
}
input[type=checkbox]:checked + label:before {
letter-spacing: 8px;
}
HTML
<input type="checkbox" id="box1" checked="">
<label for="box1">Item 1: some long text...</label>
<br>
<input type="checkbox" id="box2" checked="">
<label for="box2">Item 2: some long text...</label>
<br>
<input type="checkbox" id="box3">
<label for="box3">Item 3: some long text...</label>
I have tried to modify the margin-left and text-indent attributes of the label and label:before selectors but without any success.
Any idea how I could have the correct indent while using the nice font-awesome icons?
Thank you very much for your help!
Add this style (tested both on Chrome and Firefox)
label {
display: block;
padding-left: 1.5em;
text-indent: -.7em;
}
http://jsfiddle.net/tkt4zsmc/2/
Final result:
After trying fcalderan's suggestion and not being able to get the values for padding-left and text-indent right for different browsers, I switched to a flex box. It is pretty green nowadays.
If you put the input/label pairs in divs as it is recommended by Mozilla, you can style them this way.
fieldset {
width: 13ch;
}
fieldset > div {
display: flex;
}
fieldset > div > * {
align-self: baseline;
}
fieldset > div > input[type=checkbox] {
margin: 0 0.5ch 0 0;
width: 1em;
height: 1em;
}
<fieldset>
<legend>Sichtbarkeit</legend>
<div>
<input id="c1" checked="" type="checkbox">
<label for="c1">Minuten</label>
</div>
<div>
<input id="c2" checked="" type="checkbox">
<label for="c2">Nur Minuten, die Vielfache von 5 sind</label>
</div>
<div>
<input id="c3" checked="" type="checkbox">
<label for="c3">Stunden</label>
</div>
<div>
<input id="c4" checked="" type="checkbox">
<label for="c4">Nur 12 Stunden</label>
</div>
</fieldset>
Based on the answer by Fabrizio Calderan, I used the following modifications to the CSS:
label{
display: inline-block;
margin-left: 20px;
}
label:before{
margin-left: -23px;
}
The advantage is that it does not modify the spacing between the items. You can see the final results in JSFiddle.
I'm trying to style my radio buttons but for some reason it's not working. If I click on the one radio button then it works but the problem comes in is when I click on another radio button. What happens is that the first one I clicked stays checked and the second one I click is also checked instead of the first one becoming unchecked.
My html
<li>
<label>* Title</label>
<div class="registration_title">
<input id="mr" type="radio" name="title[mr]" value="Mr">
<label for="mr"><span></span>Mr.</label>
<input id="mrs" type="radio" name="title[mrs]" value="Mrs">
<label for="mrs"><span></span>Mrs.</label>
</div>
my css
input[type="radio"] {
display: none;
}
input[type="radio"] + label {
color: green;
}
input[type="radio"] + label span {
background: none repeat scroll 0 0 black;
border-radius: 50%;
cursor: pointer;
display: inline-block;
height: 19px;
margin: -1px 4px 0 0;
vertical-align: middle;
width: 19px;
}
input[type="radio"]:checked + label span {
background: pink;
}
Here is a jsfiddle: JSFIDDLE
The name should be same in radio buttons..
try this..
<div class="registration_title">
<input id="mr" type="radio" name="title" value="Mr">
<label for="mr"><span></span>Mr.</label>
<input id="mrs" type="radio" name="title" value="Mrs">
<label for="mrs"><span></span>Mrs.</label>
</div>
here is the FIDDLE
refer THIS to understand about radio buttons
Try to use name as common for radio buttons you used like this:
HTML:
name="title[mr]"
Demo
Is there any way to make a radio button bigger using CSS?
If not, how else can I do it?
Try this code:
input[type='radio'] {
transform: scale(2);
}
You can easily able to set it's height and width as with any element.
Here is the fiddle with code
JSFIDDLE BIG RADIO BUTTON
HTML
<input id="r1" type="radio" name="group1" class="radio1" />
<label for="r1">label 1 text</label>
<input id="r2" type="radio" name="group1" class="radio2" />
<label for="r2">label 2 text</label>
<input id="r3" type="radio" name="group1" class="radio3" />
<label for="r3">label 3 text</label>
<input id="r4" type="radio" name="group1" class="radio4" />
<label for="r4">label 4 text</label>
CSS
input[type=radio] {
display: none;
}
input[type=radio] + label::before {
content: '';
display: inline-block;
border: 1px solid #000;
border-radius: 50%;
margin: 0 0.5em;
}
input[type=radio]:checked + label::before {
background-color: #ffa;
}
.radio1 + label::before {
width: 0.5em;
height: 0.5em;
}
.radio2 + label::before {
width: 0.75em;
height: 0.75em;
}
.radio3 + label::before {
width: 1em;
height: 1em;
}
.radio4 + label::before {
width: 1.5em;
height: 1.5em;
}
Styling radio button is not easy.
Form elements in general are either problematic or impossible to style using CSS alone.
Just go through this link for your own style with bigger size for radio buttons..
Also look at this link...
Bigger radio buttons
Don't use transform: scale(1.3), it really looks horrible. Just use this:
input[type='radio'] {
height: 15px;
width: 15px;
vertical-align: middle;
}
<input type="radio">Select this item
You can do it using CSS but browser and OS also impact on this. Look at following article.
Styling radio buttons with CSS
Try this:
HTML
<label>
<input type="radio" value="1">
<div></div>
</label>
CSS
input[type="radio"] {
display: none;
}
input[type="radio"] + div {
height: 20px;
width: 20px;
display: inline-block;
cursor: pointer;
vertical-align: middle;
background: #FFF;
border: 1px solid #d2d2d2;
border-radius: 100%;
}
input[type="radio"] + div:hover {
border-color: #c2c2c2;
}
input[type="radio"]:checked + div {
background:gray;
}
DEMO: http://jsfiddle.net/nuzhysgg/
There might be some quirky <span> tricks inside radio elements but I imagine using them across different browsers would be annoying to debug.
I've used this script in the past but not recently.
CSS3 transform scale is blurry. Setting height & width does not work with FF (even the newest 66 does not support, 2020). The only cross-browser solution is custom HTML markup + CSS, which unfortunatelly is not the easiest way. See helpful tutorial custom radios & checkboxes.