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;
}
Related
I have to insert "*" to the label only if input is required.
There is a way to get the label of the input tag from the class .notEmpty?
<label for="foo">Foo</label>
<input class="notEmpty" id="foo">
You could make the field required and then use the input:valid selector to show the star when the field is empty.
Markup:
<label for="foo">Foo</label>
<input class="text" id="foo" required="required">
<span class="star" style="visibility: visible;">*</span>
CSS:
.text:valid + .star { visibility: hidden!important; }
See a working CodePen Here: https://codepen.io/fennefoss/pen/aWpqqj
You can try a little hack something like this :
label{
float: left;
margin-right: 10px;
}
.notEmpty + label::after{
content: '*';
}
<input class="notEmpty" id="foo">
<label for="foo">Foo</label>
I need to toggle styles on the corresponding label when input's focus.
HTML+CSS:
<div>
<label for="e_mail">E-Mail</label>
<input type="text" />
</div>
input[type=text]:focus + label {
color: red;
}
P.S. how to do this without changing tags "label" and "input" in HTML?
You can only do that with pure CSS if label is inserted after the input. A fix to that could be using float: left; on the label to put it to the left.
Also, <label for=""></label> require the input to have a id in order to work propertly.
<div>
<input type="text" id="e_mail" />
<label for="e_mail">E-Mail</label>
</div>
-
input[type="text"]:focus + label {
color: red;
}
label {
float: left;
}
https://jsfiddle.net/vcw880fr/1/
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 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.
is it possible to display an image outside of textbox with CSS only?
Please see my example below:
Of course, with CSS2 it is completely possible (although it is not supported by IE):
input.test:before
{
padding: 4px;
content: url(images/your_image.gif);
}
For more info, check out the following links:
http://www.quirksmode.org/css/beforeafter.html
http://www.w3.org/TR/CSS2/generate.html
If you want something that works in IE as well, you will have to do it with javascript, I'm afraid.
Why not make use of the label element? i.e:
<style>
.required { padding-right: 20px; background: url(...) no-repeat 50% 100%; }
</style>
<label class="required" title="This is a required field"><dfn>My Field:</dfn> <input type="text" /></label>
You could use a container:
CSS
#field-container
{
padding-right: 10px;
background: transparent url(images/dot.gif) middle right no-repeat;
}
HTML
<div id="field-container" class="form-row">
<label for="field">Field:</label>
<input type="text" value="" id="field" name="field" />
</div>