I'm having a CSS issue where the radio button and label are appearing on different lines if the label spans multiple lines. Here is an example:
() Option A
() Option B
()
Option C is really long so it
will span two lines
() Option D
See how the long lines are breaking after the radio option? The long label-body should span two lines, but it should be inline with the radio option such as:
() Option C is really long so it
will span two lines
Here's my CSS
input[type="radio"] {
display: inline;
margin-bottom: 0px; }
label > .label-body {
display: inline-block;
margin-left: .5rem;
font-weight: normal; }
And finally the HTML
<label>
<input type="radio"> <span class="label-body">Option A</span>
</label>
I can't seem to figure out why this is happening. If it helps, I'm using the Skeleton framework (http://getskeleton.com/).
Try removing the inline-block on the span.label-body, if possible. This sets the span in the same line as the radio button, because by default it is inline.
div {
width: 200px;
}
input[type="radio"] {
display: inline;
margin-bottom: 0px; }
label > .label-body {
margin-left: .5rem;
font-weight: normal;
}
span {
position:absolute;
width: 100px;
left: 30px;
}
<div>
<label>
<input type="radio"><span class="label-body">really long label that should span more than one line because it is really long</span>
</label>
</div>
Related
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>
I have html something like this http://jsfiddle.net/nLt9unxa/5/ and I want to place 3 block .number__label, .text__label, and .from__input in one line. .form__input must be align to the right side of form and all 3 elements must be vertical align in one line. How to do this? And I don't want use display: table-cell
And also if you know very good tutorial or book about alignment, where described all possible alignment and receipts how to do it, like cheatsheet, please share link.
you forgot to put : after max-width and min-width in .number__label
DEMO
.number__label {
display: inline-block;
background-color: #ffffff;
border: solid 1px;
max-width:20%;
min-width:20%;
}
Use vertical-align: middle (or top, or bottom). Here is the fiddle: http://jsfiddle.net/1ddewjxd/
.class
{
vertical-align: middle;
}
to align elements to right set the parent element to text-align: right, and the child elements to text-align: left. You could also float: right, but that can complicate things.
.item__label {
text-align: right;
}
.number__label, text__label, form__input {
text-align: left;
}
Run this code snippet to check whether all your requirements are done or not? also check fiddle
Check CSS Layout or learn from W3School
form {
width:70%;
background-color: #dddddd;
font-size: 20px;
}
.itme__label {
display: block;
}
.form__item {
display: block;
padding: 3px 5px;
}
.number__label {
display: inline-block;
background-color: #ffffff;
border: solid 1px;
max-width 20%;
min-width 20%;
}
.text__label {
display: inline-block;
background-color: #888888;
max-width: 50%;
}
.form__input {
display: block;
min-width: 20%;
max-width: 20%;
font-size: 1em;
margin-left:120px;
}
<form>
<div class="form__item">
<p>
<label class="item__label">
<span class="number__label">
01 12 31 23 123 2452 34534 5345
</span>
<span class="text__label">
text label long long long very long long for two or more lines ong very long long for two or more linesong very long long for two or more lines
</span>
<input type="text" class="form__input" value="input text">
</input>
</label>
</p>
<div class="errors">
<p class="error">
some error
</p>
</div>
</div>
</form>
This question already has answers here:
How to style a checkbox using CSS
(43 answers)
Closed 8 years ago.
Actually I'm styling the radio button with this trick:
HTML:
<div class="radioButt" >
<h1>Radio:</h1>
<p>Val1 : <span></span><input type="radio" id="1" checked="checked" name="radio" ><span></span></p>
<p>Val2 : <span></span><input type="radio" id="2" name="radio" ><span></span></p>
<p>Val3 : <span></span><input type="radio" id="3" name="radio" ><span></span></p>
</div>
CSS:
.radioButt p {
padding: 10px;
}
.radioButt span{
position: relative;
right: 0;
width: 25px;
height: 25px;
line-height: 25px;
padding: 3px;
color: #FFF;
text-align: center;
background: #c06f59;
}
.radioButt span:after{
content: "no"; /*if CSS are disbled span elements are not displayed*/
}
.radioButt input{
position: relative;
right: 0;
margin: -26px;
width: 31px;
height: 31px;
/*hide the radio button*/
filter:alpha(opacity=0);
-moz-opacity:0;
-khtml-opacity: 0;
opacity: 0;
cursor: pointer;
}
.radioButt input[type="radio"] + span{ /*the span element that immediately follow the radio button */
visibility: hidden; /*temporarily hide the "YES" label*/
background: #6EB558;
}
.radioButt input[type="radio"] + span:after{
width: 30px;
display: inline-block;
content: "yes"; /*if CSS are disbled span elements are not displayed*/
}
.radioButt input[type="radio"]:checked + span{
visibility: visible; /*show the "YES" label only if the radio button is checked*/
}
A working example could be found at: http://jsfiddle.net/rzt3c/2/
I want to create the same effect also for the checkbox input.
I tried to add the type "checkbox" in the css but it seem to don't work...infact when the checkbox is checked id doesn't return unchecked. ( Here there is the code: http://jsfiddle.net/rkCMa/1/ )
UPDATED ANSWER
The reason below is still correct, but there's a much easier way to do it still with CSS (bearing usability restraints still...) by using the pointer-events style. Add this to your styles:
.radioButt span{
pointer-events: none;
}
That will allow the spans to be clicked through so the post span won't block the input anymore. This should answer your question, but do keep in mind some of the usibility issues mentioned in the comments to your original question.
The reason its not working is when it displays the "Yes" that span is over the input and so it is the span that is actually being clicked and not the input. I would change the formatting so that both of the spans are before the input, and use classnames on them to distinguish and style them rather than css selectors. Something like:
<div class="radioButt" >
<h1>Checkbox:</h1>
<p>Ck1 : <span class="no"></span><span class="yes"></span><input type="checkbox" id="ck1" checked="checked" ></p>
<p>Ck2 : <span class="no"></span><span class="yes"></span><input type="checkbox" id="ck2" ></p>
<p>Ck3 : <span class="no"></span><span class="yes"></span><input type="checkbox" id="ck3" ></p>
</div>
Please take a look at http://jsfiddle.net/JHMqG/
I'm trying to figure out how to change the background of the radio button when clicked.
So far, I've been successful with the cat option, but I'm stuck at the dog option. I need the dog option to work because I want the background change to include the circle button.
Please advise. Thank you.
Here you go: http://jsfiddle.net/JHMqG/1/
On the dog, the label element only contained the text. On the cat, the label element contained the text and the radio button. Also, I cleaned up your HTML a bit.
See this:
DEMO
I changed a bit the HTML:
<div>
<input type="radio" name=1 Value=420 id="a1">
<label for="a1" class="radiostyle" >Cat ($420)</label>
</div>
<div>
<input type="radio" name=1 Value=375 id="a2">
<label for="a2" class="radiostyle">Dog ($375)</label>
</div>
and added a few bits to the CSS, so it now looks like this:
div { margin: .5em; }
input, label {
position: relative;
display: inline-block;
vertical-align: middle;
}
input[type=radio] { margin-right: -1.65em; z-index: 2; }
.radiostyle{
background-color: #CCC;
border-radius: 8px;
padding: 4px 4px 4px 1.75em;
}
.radiostyle:hover{
background-color: #0F6;
cursor:pointer;
}
input[type=radio]:checked+label {
/* Or `#a1:checked+label` if you only want it for that input */
background-color: #0F6;
}
The problem was the <input> was just preceding the <label> in the cat option, but in the dog option the <input> was inside the<label.
I corrected it by moving the <input> of the dog option to be preceding the label, you can see it working here:
http://jsfiddle.net/SxPvz/
Given the following html
<label for="inputelement">label</label>
<input type="text" id="inputelement" name="inputelement" />
You can style the input on focus using
input:focus { background: green; }
Is there a way of also styling the <label /> without JavaScript?
Thanks all
No. there is unfortunately no predecessor selector in css
input:focus -+ label { ... }
would be lovely.
having the label after the input would be dooable:
input:focus + label { ... }
you could use some positioning to display before...
For completeness, if your input field is within the label you can use focus-within:
HTML:
<label>
<input name="example" type="text">
</label>
CSS:
label:focus-within {
background: #DEF;
}
UPDATED
Make sure you check the draft as this may change: https://drafts.csswg.org/selectors-4/#relational
The :has() relational pseudo-class will allow the selection of parents for example, the following selector matches only <a> elements that contain an <img> child:
a:has(> img)
This can be combined with other selectors such as :focus, :active or :not to offer a lot of potential.
Unfortunately browser support isn’t great at the time of writing: https://caniuse.com/#feat=css-has
Adding this for people finding this page in the future. CSS4 will have a parent selector allowing you to choose what element to apply the style to:
I think the current spec allows you to specify which item is matched with a ! sign - the subject selector.
label! > input {
font-weight: bold;
}
This allows far greater control than just parent, for example in this scary chain below the p tag is the target!
article > h1 + section > p! > b > a {
font-style: italic;
}
You can use an attribute selector:
label[for=inputelement]:focus,
label[for=inputelement]:active {
/*styles here*/
}
Note that this isn't supported by IE6, but should work in all other browsers, including IE7 and IE8.
That will obviously only work for that specific ID. If you would like it to work for all IDs, simply leave out the ID:
label[for]:focus,
label[for]:active {
/*styles here*/
}
This will now work for all labels with a for attribute.
If you need something in between, you'll need to use classes.
You can, so long as the label follows the input in the Mark-up:
input:focus + label,
input:active + label {
/* style */
}
Okay the idea is to wrap the input, label, help, error etc. in a Flexbox Container.
Then use the + selector, to select the label element.
Note: it will work only when <label> comes after <input>
Then you define the <label> order by using the flexitem order property.
Sure you can also using classnames.
.container {
display: flex;
flex-direction: column;
}
input {
border: none;
}
label {
order: -1;
}
input:focus {
border: 1px solid red;
}
input:focus + label{
color: red;
}
<div class="container">
<input id="username" />
<label for="username">Username</label>
</div>
Yes, of course you can.
You'll need to:
Group both label and the form into a parent element (like a div)
Style the label with focus pseudo selector selector for the parent, ie .parent:focus label { color: green }
You can see a very minimal sample at jsfiddle I made.
<div class='workarea'>
<div class='hasinput'>
<label>Label 1 (should be green when active)</label>
<input />
</div>
<div class='hasinput'>
<label>Label 2 (should be green when active)</label>
<input />
</div>
</div>
.workarea {
max-width: 500px;
}
label,
input {
width: 100%;
}
.hasinput {
margin-bottom: 1rem;
}
.hasinput label {
color: blue;
}
.hasinput:focus-within label {
color: green;
}
Give your input button a style class
css style:
INPUT.book:hover, INPUT.book:focus:hover {
background-image:url(book_over.png);
background-repeat:no-repeat;
height: 40px;
width: 140px;
font-family:calibri, Tahoma;
font-size:20px;
color:#ffffff;
text-align: center;
font-weight: bold;
}
INPUT.book {
background-image:url(book_active.png);
background-repeat:no-repeat;
height: 40px;
width: 140px;
font-family:calibri, Tahoma;
font-size:20px;
color:#ffffff;
text-align: center;
font-weight: bold;
}
and the input html:
<input name="Bestil2" type="submit" class="book" value="Book møde" />
I haven't figured out yet, how to avoid grey background even though I have a transparent png file, maybe just an jpg will do. But I hope this helps.
Good luck :-)
Here is an alternative usign CSS grid:
As some sugested if the label is after the input then using flex or in my case using CSS grid you can place the label first.
body {
font-family: Arial;
}
.form-field {
display: grid;
gap: 4px;
}
.form-field label {
grid-row: 1;
font-size: 12px;
color: #737373;
}
.form-field input {
outline: unset;
border-radius: 6px;
padding: 6px 10px;
font-size: 14px;
border: 1px solid #737373;
}
.form-field input:focus {
border-color: #328dd2;
}
.form-field input:focus + label {
color: #328dd2;
}
<div class="form-field">
<input id="myinput" />
<label for="myinput">
My Input
</label>
</div>
This can be done if you target browsers that support flexbox - see this: http://plnkr.co/edit/g376cf38iphfvGfSubOz?p=preview
For brevity, the css there is minimal but you'll need some browser specific prefixes to extend support to somewhat older browsers.