I have the following CSS:-
#profile-container ul label:before {
content: "";
display: inline-block;
width: 33px;
height: 33px;
margin-right: 10px;
position: relative;
left: 0;
top: 10px;
background: url(../img/c-unchecked.png);
}
#profile-container input:checked label:before {
background: url(../img/c-checked.png);
}
With the following markup:-
<ul class="acf-checkbox-list checkbox vertical">
<li><label><input id="acf-field-interested_in" type="checkbox" class="checkbox" name="interested_in" value="permanent" checked="yes">Permanent</label></li>
<li><label><input id="acf-field-interested_in-Temporary" type="checkbox" class="checkbox" name="interested_in" value="Temporary" checked="yes">Temporary</label></li>
<li><label><input id="acf-field-interested_in-Interim" type="checkbox" class="checkbox" name="interested_in" value="Interim" checked="yes">Interim</label></li>
</ul>
I can't see why the image isn't being replaced once you click on the checkbox, any ideas?
You need to pay attention to the nesting selectors:
#profile-container input:checked label:before {
label is not inside input. It's the parent of input, and sadly CSS has no parent selector. You can restructure your code to:
<li><input /><label></label></li>
Then use the sibling selector:
#profile-container input:checked+label:before {
The problem comes from trying to target the parent selector label:before with input:checked. CSS doesn't allow you to 'climb up the DOM' in this manner. Instead you may want to try with the following markup :
<ul class="acf-checkbox-list checkbox vertical">
<li><input id="acf-field-interested_in" type="checkbox" class="checkbox" name="interested_in" value="permanent" checked="yes"/><label>Permanent</label></li>
<li><input id="acf-field-interested_in-Temporary" type="checkbox" class="checkbox" name="interested_in" value="Temporary" checked="yes"/><label>Temporary</label></li>
<li><input id="acf-field-interested_in-Interim" type="checkbox" class="checkbox" name="interested_in" value="Interim" checked="yes"/><label>Interim</label></li>
</ul>
Don't forget to close your input tags as per the HTML specs!
Related
This is what is showing what ever css style I put
I really want to have this please help
<li><div class="wide checkbox-inline">
<label class="required" for="options[3]">Delivery Day <em>*</em> </label>
<div class="input-box">
<ul class="options-list"><li><input type="checkbox" name="options[3][]" id="options_3_text_Sunday" class="checkbox" title="Sunday" value="Sunday"><label for="options_3_text_Sunday"> Sunday</label></li><li><input type="checkbox" name="options[3][]" id="options_3_text_Monday" class="checkbox" title="Monday" value="Monday"><label for="options_3_text_Monday"> Monday</label></li><li><input type="checkbox" name="options[3][]" id="options_3_text_Tuesday" class="checkbox" title="Tuesday" value="Tuesday"><label for="options_3_text_Tuesday"> Tuesday</label></li><li><input type="checkbox" name="options[3][]" id="options_3_text_Wednesday" class="checkbox" title="Wednesday" value="Wednesday"><label for="options_3_text_Wednesday"> Wednesday</label></li><li><input type="checkbox" name="options[3][]" id="options_3_text_Thursday" class="checkbox" title="Thursday" value="Thursday"><label for="options_3_text_Thursday"> Thursday</label></li><li><input type="checkbox" name="options[3][]" id="options_3_text_Friday" class="checkbox" title="Friday" value="Friday"><label for="options_3_text_Friday"> Friday</label></li><li><input type="checkbox" name="options[3][]" id="options_3_text_Saturday" class="checkbox validate-one-required-by-name" title="Saturday" value="Saturday"><label for="options_3_text_Saturday"> Saturday</label></li></ul> </div>
</div></li>
.checkboxes label {
display: block;
float: left;
padding-right: 10px;
white-space: nowrap;
}
.checkboxes input {
vertical-align: middle;
}
.checkboxes label span {
vertical-align: middle;
}
After you added the code, i took a closer look. Seems the problem is caused by use of the UL (unordered list). The list sums up all the list-items (LI's), which normally start on a new rule for every item.
Normally this is what you want by adding a list, but in this case you don't want to sum up the checkboxes in a list.
To solve the problem the fast way, you can use this styling:
.options-list li{
display: inline;
}
The better way is to leave out the < li >- and < ul >-tags in this case.
Check this out for the working example:
https://jsfiddle.net/crix/o1du23b3/
Hope this helps!
My html:
<div class="product-addon product-addon-extra-tip">
<p class="form-row form-row-wide addon-wrap-2004-extra-tip-0-0">
<label><input type="radio" class="addon-radio" name="addon-2004-extra-tip-0[]" value="2">2</label>
</p>
<p class="form-row form-row-wide addon-wrap-2004-extra-donation-to-trafficking-survivors-0-1">
<label><input type="radio" class="addon-radio" name="addon-2004-extra-tip-0[]" value="5">5</label>
</p>
</div>
I'm trying to style these radio inputs to look like buttons, and I'm almost there. The problem is that given the current construct (which I can't directly change), I can't figure out how to make the :checked option look different than the rest.
You can see in the jsfiddle where I'm falling short. Is this possible?
http://jsfiddle.net/2gdotu21/1/
Via CSS, input set in front of label and correct attribute used, you can apply a different style if input is :checked or not.
See: https://www.w3.org/wiki/HTML/Elements/label & further more https://www.w3.org/TR/WCAG20-TECHS/H44.html
label {/* button unchecked add your style*/
color:red
}
label:before {/* button checked add your style*/
content:'$';
font-size:1rem;
}
input:checked + label {
color:green;
}
[type=radio]{ /* hide it ? use any methode but display:none; */
position:absolute;
right:200%;
}
<input type="radio" class="addon-radio" name="addon-2004-extra-tip-0[]" value="2" id="addon-2004-extra-tip-0[]" />
<label for="addon-2004-extra-tip-0[]">2</label>
<input type="radio" class="addon-radio" name="addon-2004-extra-tip-0[]" value="2" id="addon-2004-extra-tip-0[1]" />
<label for="addon-2004-extra-tip-0[1]">300</label>
<input type="radio" class="addon-radio" name="addon-2004-extra-tip-0[]" value="2" id="addon-2004-extra-tip-0[2]" />
<label for="addon-2004-extra-tip-0[2]">14</label>
<!-- same name to allow only one checked in this demo -->
else with your structure, integrate the radio within the design of the button http://codepen.io/gc-nomade/pen/LketK (oldish glassy button)
example of your code to change bg color
.product-addon-extra-tip label {
float: left;
width: auto;
min-width: 60px;
margin: 3px;
border-radius: 4px;
border: 1px solid #D0D0D0;
overflow: auto;
color: black;
font-size: 1.2rem;
text-align: center;
padding: 5px 0;
display: block;
line-height: 1.3rem;
}
.product-addon-extra-tip label input {}
.product-addon-extra-tip label:before {
content: '$';
}
label {
position: relative;
}
input {
position: absolute;
top: -15px;
z-index: -1;
box-shadow: 0 0 0 200px tomato;
}
input:checked {
box-shadow: 0 0 0 200px green;
}
<div class="product-addon product-addon-extra-tip">
<p class="form-row form-row-wide addon-wrap-2004-extra-tip-0-0">
<label><input type="radio" class="addon addon-radio" name="addon-2004-extra-tip-0[]" data-raw-price="0" data-price="" value="2"> 2 </label>
</p>
<p class="form-row form-row-wide addon-wrap-2004-extra-tip-0-1">
<label><input type="radio" class="addon addon-radio" name="addon-2004-extra-tip-0[]" data-raw-price="0" data-price="" value="5"> 5 </label>
</p>
</div>
I'm trying to make bigger radio buttons, without any luck.
It's a custom WP plugin and the owner doesn't support users for these kind of questions.
I tried to follow many tutorials like this one, but the code structure generally is different.
My code is:
<li class="wpProQuiz_questionListItem" data-pos="1">
<span style="display:none;">1. </span>
<label>
<input class="wpProQuiz_questionInput" type="radio" name="question_1" value="323"/>
Answer 1
</label>
</li>
In tutorials the code is presented as:
<td>
<input type="radio" name="radiog_dark" id="radio1" class="css-checkbox" />
<label for="radio1" class="css-label radGroup2">Option 1</label>
</td>
Can someone help me?
The HTML markup:
<ul>
<li>
<label>
<input class="wpProQuiz_questionInput" type="radio" name="question_1_2" value="3" />
<span class="graphical-radio"></span>
Non riesco a lasciarlo solo
</label>
</li>
</ul>
The CSS:
input[type="radio"] {
display: none;
}
.graphical-radio {
background: gray;
display: inline-block;
width: 30px;
height: 30px;
border-radius: 100%;
}
input[type="radio"]:checked + .graphical-radio {
background: red;
}
The magic is with :checked selector, so you can style the graphical-radio as you want.
jsFiddle Demo.
2022 use height, width, and accent-color
Luckily times have changed and styling checkboxes and radio buttons is easier:
input {
height: 30px;
width: 30px;
accent-color: #9d3035;
}
<input type="radio" />
Form element styling is almost impossible to do cross-browser. I would go for a custom designed element which reflects the state of a hidden checkbox using javascript.
I am looking for a neat way to space my form elements but i am not so sure how to do it.
Currently,i am using the ordinary <br/> to space but i wonder if there was a better way of doing this using class or id
<form>
Message: <input type="text" class="msg" name="message" /><br/><br/>
<input type="submit" class="c-add" value="Add" />
<input type="submit" class="c-update" value="Update" />
</form>
I am thinking of
.c-add + .c-update{
margin-right:100px;
}
but that's not valid css.What would be the solution?
.c-add + .c-update is a valid CSS selector. It selects all elements with the "c-update" class that follow immediately an element with the "c-add" class. Example: DEMO (CSS Selector Reference)
Solution
You can seperate multiple selectors with a comma. You do not need to give each input a unique class name. That's only necessary if you want to style them uniquely. Since you did not provide information on how the expected result should look like, i made a demo with different solutions:
DEMO
HTML markup:
<form class="form">
<label>Message:</label><input type="text" class="msg" name="message" />
<input type="submit" class="add" value="Add" />
<input type="submit" class="update" value="Update" />
</form>
Note that i wrapped "Message" with label, which is better markup.
CSS to make a one-row inline form:
.form input {
margin-right: 0.5em;
}
.form label {
float: left;
margin-right: 0.5em;
}
CSS to make a multiple-row form:
.form input {
display: block;
margin-bottom: 1em;
}
.form label {
float: left;
margin-right: 0.5em;
}
You can mix both approaches by using specific classes for each input element or type.
Use a comma to separate selectors.
.c-add, .c-update {
The structure, perhaps this way:
<form action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>">
<ul>
<li>
<label>
<span>Name</span>
<input type="text" name="name" />
<small class="errorText"><?php echo ($_POST["name"] == "") ? "This field is required" : ""; ?></small>
</label>
</li>
<li>
<label>
<span>Email</span>
<input type="text" name="email" />
<small class="errorText"><?php echo ($_POST["email"] == "") ? "This field is required" : ""; ?></small>
</label>
</li>
<li>
<label>
<span>Subject</span>
<input type="text" name="subject" />
<small class="errorText"><?php echo ($_POST["subject"] == "") ? "This field is required" : ""; ?></small>
</label>
</li>
<li>
<label>
<span>Message</span>
<textarea name="message" cols="80" rows="7"></textarea>
<small class="errorText"><?php echo ($_POST["message"] == "") ? "This field is required" : ""; ?></small>
</label>
</li>
<li>
<input type="submit" name="submit" value="Send" />
</li>
</ul>
</form>
And the CSS for the same:
* {font-family: Segoe UI, Tahoma;}
h1 {font-weight: bold; font-size: 14pt; padding: 5px 0; margin: 5px 0; border: 1px solid #999; border-width: 1px 0;}
input[type='submit'] {padding: 5px 20px; cursor: pointer;}
ul, li {display: block; list-style: none; margin: 0; padding: 0;}
ul li {padding: 5px 0;}
ul li label span {display: block; cursor: pointer;}
ul li label .errorText {color: #f00; font-weight: bold; vertical-align: top;}
ul li label textarea {width: 300px;}
You can see a live demo here: Demo
I have this HTML:
<div>
<label>field 1</label>
<input type="text">
<label>field 2</label>
<input type="text">
<label>field 3</label>
<input type="text">
</div>
How can I make a label-input pair use 100% of the width with CSS ? (and each pair be on their own line)
I used to put the label-input pair in a sub div of their own. But I'm wondering if there's a way to do it with just CSS. (I'm using compass to generate the CSS).
For bonus points .. can you have the same CSS make the label a line above on mobile (small screen) devices.
Thanks heaps.
Sort of like this? http://jsfiddle.net/m6pZH/13/
I suggest you modify your HTML slightly, as it will be hard (if even possible) to properly maintain your current HTML properly:
<ul>
<li>
<label>field 1</label>
<input type="text" />
</li>
<li>
<label>field 2</label>
<input type="text" />
</li>
<li>
<label>field 3</label>
<input type="text" />
</li>
</ul>
CSS:
li {
display: block;
overflow: auto;
}
li > label {
float: left;
}
li > input {
width: auto;
float: right;
}
Try this:
div label, div input {
display: block;
}
displaying elements on block puts them on their own line and makes them a block element.
Edited content:
div { width: 600px }
div label { float: left; width: 200px; }
div input { float: right: width: 390px; }
Try this.