I have the following HTML:
<input type="radio" name="beds" value="1" />1+
<input type="radio" name="beds" value="2" />2+
How do I change the spacing between the radio button and the "1+" text? I'd like the text to be closer to the radio button, but the browser is inserting a certain amount of undefined padding between the two elements.
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" />1+
You probably want to add it to your stylesheet so that it applies to all radio buttons:
input[type="radio"] {
margin-right: 0;
}
You'll need the label element.
<input type="radio" name="beds" value="1" id="first" /><label for="first">1+</label>
<input type="radio" name="beds" value="2" id="second" /><label for="second">2+</label>
You can then style this like this:
label {
margin-left: -3px;
}
Also note the use of the for attribute for accessibility purposes.
Just change the input id's width to auto in css.
#input-id {
width: auto;
}
You can add this to your stylesheet:
input[type="radio"] {
margin-right: 10px;
}
First Create id's inside input tag (eg id="input1"), then style id's in css file(eg #input1{margin-left:5px; margin-top:5px;}) also you can use inline styling using margin-top:5px,and margin-left:5px
<input type="radio" name="beds" value="1" id="first" />
<label for="first">
1+
</label>
<input type="radio" name="beds" value="2" id="second" />
<label for="second">
2+
</label>
this is what you have
change your +1 (and +2) to
<h:outputText value ="+1" style="margin-left: -3px"/>
You have to mess with the style of the text you are using as a label, and to do that you need it to be an actual element, not just raw text.
Related
I am using some code from purecss.io to create some elegant looking forms. I am also using this code to have a simple rating system for my form.
However, when I combine the two together, the spacing on the rating looks very spaced out because of the CSS from purecss.io
How can I fix the spacing?
Here is the code:
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
<form action="" method="post" class="pure-form pure-form-aligned">
<fieldset>
<div class="pure-control-group">
<label for="foo">Supercalifragilistic Label</label>
<input id="foo" type="text" placeholder="Enter something here...">
</div>
<div class="pure-control-group">
<label for="foo">Rating</label>
<div class="acidjs-rating-stars">
<input type="radio" name="group-1" id="group-1-0" value="5" /><label for="group-1-0"></label><!--
--><input type="radio" name="group-1" id="group-1-1" value="4" /><label for="group-1-1"></label><!--
--><input type="radio" name="group-1" id="group-1-2" value="3" /><label for="group-1-2"></label><!--
--><input type="radio" name="group-1" id="group-1-3" value="2" /><label for="group-1-3"></label><!--
--><input type="radio" name="group-1" id="group-1-4" value="1" /><label for="group-1-4"></label>
</div>
</div>
<div class="pure-controls">
<label for="cb" class="pure-checkbox">
<input id="cb" type="checkbox"> I've read the terms and conditions
</label>
<input name="SubmitButton" type="submit" class="pure-button pure-button-primary">Submit</button>
</div>
</fieldset>
</form>
Here is what the page looks like for me:
I saw the other answers included suggestions for !important statements, so I decided to post mine. I threw the code you provided into a codepen.io and made a few quick changes to see if this is what you were looking for.
I added the class "raters" to your markup and styled it with that.
<div class="pure-control-group raters">
<label for="foo">Rating</label>
<div class="acidjs-rating-stars">
You can see why I've added these style rules in the comments supplied with them:
.raters label{
float:left; /* Corrective float for your modified code */
}
.raters input{
margin:0 0.25em; /* Spaces out the 'floated' radio inputs for presentation*/
}
.raters .acidjs-rating-stars label{ width:auto; } /* Actual Width Correction */
You can see it working live here: http://codepen.io/anon/pen/vKNGpv
(Note: I added the yahoo's external stylesheet to the CSS panel settings. You can access them with the gear in the top right-hand corner.)*
You can override margin for the inputs (which are you rating stars) of the purecss css in another css file with this very specific selector:
.pure-form.pure-form-aligned .acidjs-rating-stars input[name="group-1"] {
background: blue;
margin-right: -160px;
}
The base css is overwriting yours as you have suspected. You need to either define your padding/margin on your label elements using !important to make sure the css rules you define take precedence.
For instance if the margin for label elements is 0.5em top/bottom 0.2em on the left/right and you only want it say 0.1em on the left/right you would have to define in your css file like this
margin: {
0.5em 0.1em !important;
}
The following HTML is generated from a library and cannot be changed in any way, so I need a CSS only solution for my problem. I would like for the radio buttons to appear vertically instead of left to right to each other like so
This is my code.
<span class="buttonset" id="test">
<input type="radio" id="test_1" name="test" value="CC">
<label for="test_1">Option 1</label>
<input type="radio" id="test_2" name="test" value="PL">
<label for="test_2">Option 2</label>
<input type="radio" id="test_3" name="test" value="AL">
<label for="test_3">Option 3</label>
<input type="radio" id="test_4" name="test" value="HL">
<label for="test_4">Option 4</label>
<input type="radio" id="test_5" name="test" value="CL">
<label for="test_5">Option 5</label>
<input type="radio" id="test_6" name="test" value="CL">
<label for="test_6">Option 6</label>
</span>
See also http://jsfiddle.net/QHvhs/
Is there a pure CSS way to get a new line after each input and label element?
you can use css3 pseudo selector :after to insert a line break after every label, making the list vertical.
.buttonset label:after {
content:"\A";
white-space:pre;
}
live demo: Fiddle
This is more semantically better.
You shouldn't have the form elements inside of a SPAN, but rather use DIV.
<span class="buttonset" id="test">
to
<div class="buttonset" id="test">
And the way you should wrap LABEL is
<label for="test_6"><input type="radio" id="test_6" name="test" value="CL"> Option 6</label>
You can then use CSS selector in a better semantic way
.buttonset label {
display: block;
}
I wrote the HTML below to display two radio buttons and some text.
<input id="radio1" type="radio" checked="checked"/>Create the application name <br/>
<input id="radio2" type="radio"/> Create the Source name
My issue is that the radio buttons and the text are not aligning properly. The radio buttons are displaying a little bit below the text. How do I align the radio buttons and the text on the same line with proper alignment?
Demo
vertical-align: middle:
Aligns the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent.
The problem seems to be caused by the fact browsers commonly add some random uneven margins to radio buttons and checkboxes.
Use inline style, weird but true:
<input type="radio" style="vertical-align: middle; margin: 0px;"> Label
<br/>
<br/>
<input type="radio" style="vertical-align: middle; margin: 0px;"> Label
<br/>
<br/>
<input type="radio" style="vertical-align: middle; margin: 0px;"> Label
Edit
this short explanation by Gavin Kistner, which is useful. I tried out the final suggestion on that page, which seems to render respectably in Chrome, IE, Firefox, Opera, and Safari.
What I did was add td{ line-height:1.5em }
Not too clear what you're after specifically..but:
Demo Fiddle
Add:
input{
vertical-align:top;
}
You may also want to chage this to vertical-align:middle;margin:0; depending on your requirements.
Try it below code...
input {float: left;
margin-top: 3px;}
add style for input type as
input
{
vertical-align: top;
}
and avoid the space in front of Create the Source name.
<input id="radio2" type="radio"/> Create the Source name
<input id="radio1" type="radio" checked="checked"/><label for="radio1">Create the application name</label>
<input id="radio2" type="radio" /><label for="radio2">Create the application name</label>
input,label{
vertical-align: top;
}
FIDDLE DEMO
<form >
<label>
<input name="radiobutton" type="radio" value="radiobutton" />
Man</label>
<label><br>
<input name="radiobutton" type="radio" value="radiobutton" />
Women</label>
</form>
/******this will help you********/
Im having the following html for radio buttons,and I have added the css also
<br/><br/>
<input type="radio" id="radio1" name="radios" value="CC" checked>
<label for="radio1">Credit Card</label>
<br><br>
<br/><br/>
<input type="radio" id="radio2" name="radios"value="DB">
<label for="radio2">Debit Card</label>
<br><br>
its css is
/*
Hide radio button (the round disc)
we will use just the label to create pushbutton effect
*/
input[type=radio] {
display:none;
margin:10px;
}
/*
Change the look'n'feel of labels (which are adjacent to radiobuttons).
Add some margin, padding to label
*/
input[type=radio] + label {
display:inline-block;
margin:-2px;
padding: 4px 12px;
background-color: #e7e7e7;
border-color: #ddd;
}
/*
Change background color for label next to checked radio button
to make it look like highlighted button
*/
input[type=radio]:checked + label {
background-image: none;
background-color:#d0d0d0;
}
but the radio buttons doesnt align in one line
here is the jsfidlle http://jsfiddle.net/8ew6g/3/
heres the link http://jsfiddle.net/8ew6g/9/ [solved]
The radio button is below payment mode label,i have applied some css on it,so it wont look like a basic rabio button
Update:
This resource might also be useful, as it uses similar code and the result is inline.
I would suggest following this advice and then wrapping your code with the title in a fieldset. This will allow you to make a legend, so your code will look like this:
<fieldset>
<legend><strong>Payment Mode- Select your payment mode</strong></legend>
<input type="radio" id="radio1" name="radios" value="all" checked>
<label for="radio1">Credit Card</label>
<input type="radio" id="radio2" name="radios" value="false">
<label for="radio2">Debit Card</label>
</fieldset>
You will also want to add this to your CSS:
fieldset {
border: none;
}
You can try this:
<table>
<tr>
<td>
<input type="radio" id="radio1" name="radios" value="CC" checked />
<label for="radio1">Credit<nobr/> Card</label>
</td>
<td>
<input type="radio" id="radio2" name="radios" value="DB">
<label for="radio2">Debit<nobr/> Card</label>
</td>
</tr>
</table>
in order to make sure that the line doesn't break between the two words, which happened when I tried it on your Fiddle.
Your HTML is rather muddled, particularly given the div elements tagged as table and row, so I am not quite sure what to make of it. I am hesitant to recommend a table, particularly in light of this, so maybe you should consider if there is something you could do other than using completely fake radio buttons.
Remove the two <Br /> tags you have between the radio buttons
and wrap the radio buttons with <div> and increase its width to about 180px
like:
<div style="width:180px;">
<input type="radio" id="radio1" name="radios" value="CC" checked>
<label for="radio1">Credit Card</label>
<input type="radio" id="radio2" name="radios"value="DB">
<label for="radio2">Debit Card</label>
</div>`
why can't one set a style like the font size in an input tag, e.g.
<input style="font-size:20px" type="radio" name="a" value="a">some text</input>
Shouldn't the font attributes apply?
Secondly, what is the best way to do this then?
Thanks
I think that it's because the CSS you're setting applies to the 'inner' tag of that input.
The thing you want styled is its Value, so you need to wrap your input inside a placeholder and style that.
For example:
<span style="font-size:40px">
<input type="radio" name="a" value="a">some text
<input type="radio" name="a" value="b">some text
</span>
Works as expected.
There's not a lot you can do to style a radio button, however:
<input type="radio" name="radiogroup" id="radio-1">
<label for="radio-1">Radio button 1</label>
you can style the label...
The best way to go about this is providing the style deceleration within an external stylesheet, or perhaps at the top of the document. Inline styles are typically what you want to avoid if at all possible, as it becomes confusing for later changes and can cause really dirty specificity issues.
An example of a fix:
HTMl (example)
<div id="form">
<input type="text" name="name" value="a" />
</div>
CSS (example)
#form input {
font-size: 20px;
}
Hope this helps.
Try the following:
<input type="radio" name="a" value="a"><span style="font-size: 50px;">some text</span></input>
If you wrap the text with a span\p tag you will be able to style the inner text of that tag.
I know this question already has an accepted answer, but I figure it's worth mentioning this:
It may be better to either associate a <label> tag with each radio input (using the for attribute of the label) or wrapping each radio input with a label tag. This lets your user click on the text to select the radio input instead of having to aim for a rather small circle.
So your markup looks like so:
<input type="radio" id="radio1" name="radios" value="something 1" />
<label for="radio1">Something 1</label>
<input type="radio" id="radio2" name="radios" value="something 2" />
<label for="radio2">Something 2</label>
<input type="radio" id="radio3" name="radios" value="something 3" />
<label for="radio3">Something 3</label>
Radio inputs are grouped into mutually exclusive selections by their name, which the group will share. The value specified in the for attribute of the label will match the id attribute of the radio input you want selected. So in the sample above, if you click on the text "Something 1", the radio input that is id'd as radio1 gets selected.
You can then style the text of the label to your heart's content.
This is in regards to the second part of your question,
"Secondly, what is the best way to do this then?"
#input {
background-color: black;
color: green;
text-align: center;
}
<input id="input" value="Value" />