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!
Related
So I basically have a label and text like this:
<label class="labelClass"> for="something">
<input id="inputID" class="inputClass" name="inputName" value="value" type="radio">
Some text inside the label.
</label>
Note that this is just an example and not used for any other means.
So I can and know how to call to this label and input, but They keep looking like this:
I already tried:
margin-right
padding & padding-right
text-align:center
Like in the following css example:
.page-to-the-css label.something.option {
margin-right:20px;
padding-right:20px;
text-align:center;
}
and also for the radio button:
.page-to-the-css input.something.inputClass {
margin-right:20px;
padding-right:20px;
text-align:center;
}
Hope anyone could help me solve this problem.
Note: I also can't touch the jquery, javascript or anything else but css, so keep it at css please.
UPDATE: Neither did any of the current answers work, also not the one of VilleKoo.
EDIT: This is the form it is happening to: form This website is drupal so I can't reach the html or sadly I can't provide you guys of any code. I hope this problem could be solved either way.
This should work for you.
label {
display: block;
}
input {
display: inline-block;
margin-right: 0.5rem;
}
<label id="labelID" for="something">
<input id="inputID" class="inputClass" name="inputName" value="value" type="radio">
Some text inside the label.
</label>
<label id="labelID" for="something">
<input id="inputID" class="inputClass" name="inputName" value="value" type="radio">
Some text inside the label.
</label>
Look my example, it is easy
.labelClass {
position: relative;
display: block;
text-align: center;
padding-left: 20px;
}
.labelClass .inputClass {
position: absolute;
left: 0;
}
<label class="labelClass" for="something">
<input id="inputID" class="inputClass" name="inputName" value="value" type="radio">
Some text inside the label.
</label>
Many HTML elements have a default margin setting. You can override this and set it to 0. In your case, you want to reset margin-right on the radio button:
<input type="radio" name="beds" value="1" style="margin-right: 0" />
You probably want to add it to your stylesheet so that it applies to all radio buttons:
input[type="radio"] {
margin-right: 0;
}
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!
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 want a row of blocks from left to right, followed by a block underneath.
Here is a picture of what I would like to see rendered in the browser.
I need to do all positioning by CSS, not by tables. Here is my HTML and my CSS...
<!DOCTYPE html>
<html>
<head><link rel="stylesheet" href="demo.css" /><head>
<body>
<form action="">
<fieldset>
<legend>Field set A</legend>
<label for="password">Password
<input id="password" name="password" type="text" value="my password" />
</label>
</fieldset>
<fieldset class="radio">
<legend>Chaining mode</legend>
<label for="chain-cfb">
<input id="chain-cfb" name="chain" type="radio" />CFB
</label>
<label for="chain-cbc">
<input id="chain-cbc" name="chain" type="radio" />CBC
</label>
</fieldset>
</form>
<hr />
<p style="padding-top: 1em;">Some text underneath</p>
</body>
</html>
... and here is the content of demo.css...
fieldset
{
float: left;
display: block;
width: 17em;
margin: 0 1em 1em 0;
padding: 0 1em 1em 1em;
}
fieldset.radio input
{
clear: both;
float: left;
width: auto;
}
input
{
display: block;
width: 15em;
}
label
{
display: block;
margin-bottom: 1em;
font-weight: bold;
}
label.first
{
padding-top: 1em;
}
The way I read it, should be getting the desired result with this code. But I am not. Here is what renders instead ....
What changes do I need to make to my html/css in order to get the stated desired result?
A way without clearing is:
form { overflow: hidden; }
I usually create a class called floatbox and use this on every container which contains floating elements
.floatbox { overflow: hidden; }
the matching html then is
<form class="floatbox" action="">
<fieldset><p>I'm floating</p></fieldset>
<fieldset><p>me too</p></fieldset>
</form>
you need to make the <hr /> element clear the floats. hr { clear: left; }
Add:
hr {
clear: left;
}
to your style sheet to clear your floats.
You could use the ole' dummy clearing element trick:
<form action="">
<fieldset>
<legend>Field set A</legend>
<label for="password">Password
<input id="password" name="password" type="text" value="my password" />
</label>
</fieldset>
<fieldset class="radio">
<legend>Chaining mode</legend>
<label for="chain-cfb">
<input id="chain-cfb" name="chain" type="radio" />CFB
</label>
<label for="chain-cbc">
<input id="chain-cbc" name="chain" type="radio" />CBC
</label>
</fieldset>
<div style="clear:both"> </div>
</form>
This ensures your form actually occupies as much space as the elements inside it.
The problem with simply clearing the hr is that the form has zero width and height, which could be problematic if you're applying styling to the form as well.
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.