My HTML radio buttons are lining up vertically not horizontally. Also, the text for each of them is not right beside the button like I wish it would be.
<fieldset>
<legend>Payment Method</legend>
<input type="radio" name="payment_type" value="bill"/>
<label for="bill">Bill Me</label>
<input type="radio" name="payment_type" value="credit" checked/>
<label for="credit">Credit Card</label>
<input type="radio" name="payment_type" value="paypal"/>
<label for="paypal">Paypal</label>
</fieldset>
That is the code for my HTML buttons. I have an external style sheet, but I have not implemented any styling for the buttons as of now.
Checkboxes are aligned horizontally by default, as are the labels. You must be setting display:block on an element. Either remove that, or overwrite it by applying display:inline-block.
Try the following CSS:
input[type="radio"] {
display:inline-block;
}
label {
display:inline-block;
}
As I said, these are default properties. You should receive the following results. jsFiddle here It would be better just to remove display:block as opposed to merely overwriting it.
Related
I'm using Twitter Bootstrap and I need two radio buttons, inline, with text on the left. So far afer a couple of pieces of different code I managed to get them inline, the text is on the right though. That's not the main problem anyway - take a look at how the radio buttons look:
On the left there seem to be two radio buttons, one on top of the other. Another thing is that when I choose the second one, the first one still appears chosen.
My questions (the most important on top):
1) How to deal with two radio buttons being chosen at the same time?
2) How to style the radio buttons? I tried background color, border - nothing changes
3) How to put the text to the left from the radio button? Changing its position before and after input doesn't change a thing.
Here's the code:
<form name="searchform">
<input type="text" name="searchterms">
<input type="submit" name="SearchSubmit" value="Search">
<label class="search-radio-text"><input type="radio" name="sex" value="male">Nazwisko</label>
<label class="search-radio-text"><input type="radio" name="sex" value="female">Tytuł</label>
</form>
One solution is to style the labels, after hiding the radio boxes themselves and binding the labels to their radio boxes.
HTML
<form name="searchform">
<input type="text" name="searchterms">
<input type="submit" name="SearchSubmit" value="Search">
<input type="radio" id="radio1" name="sex" value="male">
<label class="search-radio-text" for="radio1">Nazwisko</label>
<input type="radio" id="radio2" name="sex" value="female">
<label class="search-radio-text" for="radio2">Tytuł</label>
</form>
CSS
input[type="radio"] {
display:none;
}
input[type=radio] + label {
display:inline-block;
margin:-2px;
padding: 4px 12px;
background-color: #e7e7e7;
border-color: #ddd;
}
input[type=radio]:checked + label {
background-image: none;
background-color:#99cc33;
}
Demo: http://jsfiddle.net/user2314737/X5gBm/
You can also simulate checkboxes using images like this: http://jsfiddle.net/user2314737/X5gBm/1/
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********/
How to create vertical Radio Button Group instead of horizontal button group in an html form?
I don't want to use a table for this. Is there any property/attribute available?
Any type of help/suggestion would be appreciated, thanks.
There are three ways you can do it: two with CSS or 1 with oldschool html:
1) The preferred way would be to use a CSS class. (ie add class="block" to the element and then .block {display:block} to your stylesheet.
2)Inline styles: Add style="display:block" to the element.
3)HTML: Add a hard break (br) element after the radio element (or enclose the elements each in a div or p element.)
Example:
<style type="text/css">
.block {
display: block;
}
</style>
...
<form>
<label class="block"><input type="radio" name="radgroup" value="A">Option A</label>
<label class="block"><input type="radio" name="radgroup" value="B">Option B</label>
<label class="block"><input type="radio" name="radgroup" value="C">Option C</label>
<label class="block"><input type="radio" name="radgroup" value="D">Option D</label>
</form>
I have a list of checkboxes, each one with a label:
<input type="checkbox" id="patient-birth_city" name="patient-birth_city" />
<label for="patient-birth_city">(_PATIENT_BIRTH_CITY_)</label>
<input type="checkbox" id="patient-birth_state" name="patient-birth_state" />
<label for="patient-birth_state">(_PATIENT_BIRTH_STATE_)</label>
<input type="checkbox" id="patient-birth_country" name="patient-birth_country" />
<label for="patient-birth_country">(_PATIENT_BIRTH_COUNTRY_)</label>
Without using any CSS they are showed in the same line (I suppose they have a default "inline" or "block-inline" display). The problem is I can't modify HTML structure and I need each pair checkbox-label appear in a new line. Like this. Is it possible using only CSS?
The good thing about label tags is you can wrap the input elements:
<label>
<input type="checkbox" id="birth_city" name="birth_city" />
City
</label>
<label>
<input type="checkbox" id="birth_state" name="birth_state" />
State
</label>
<label>
<input type="checkbox" id="birth_country" name="birth_country" />
Country
</label>
And if you add the following CSS:
label {
display: block;
}
It will display it how you want.
Demo here
As you CAN'T edit your HTML, this CSS would work:
input, label {
float: left;
}
input {
clear: both;
}
Demo here
Using float:left and clear:left you can do this with only css.
Demo: http://jsfiddle.net/VW529/2/
input {margin:3px;}
input, label {float:left;}
input {clear:left;}
The only problem is that the example does not show more information of parent elements, giving the container element overflow:hidden and/or clear:both might be needed to prevent floating elements next to the last label. (edited jsfiddle code with container div)
If I have a html form like the following:
<form name="statusForm" action="post.php" method="post" enctype="multipart/form-data">
Test:
<input name="checkboxes[]" value="Test" type="checkbox">
<br>
TestTestTest:
<input name="checkboxes[]" value="Test" type="checkbox">
<br>
TestTestTestTestTestTest:
<input name="checkboxes[]" value="Test" type="checkbox">
<br>
TestTestTestTestTestTestTestTestTestTestTest:
<input name="checkboxes[]" value="Test" type="checkbox">
<br>
<input name="Submit" value="submit" type="submit">
</form>
Is it possible to align the checkboxes so they are in union, without using a table or css but pure html? Otherwise, which css should be used?
Yup. Surround each label with a <label> tag:
<label for="checkboxes1">Test:</label>
<input id="checkboxes1" name="checkboxes[]" value="Test" type="checkbox">
Then give the label a width:
label {
display: inline-block; /* try "block" instead if this fails in IE */
min-width: 5em;
}
That should pad out the text boxes nicely. As an added bonus, clicking on the label should now place the browser focus into the textbox.
The article Applying CSS to forms has some examples of syling labels to cause inputs to the right to line up along a vertical edge.
That said, it is a convention in user interface design to place labels to the right or radio buttons and checkboxes. If you follow that convention, then they will line up by themselves (since all the checkboxes will share a width).
You could just put your labels and inputs in an unorderded list. In order to get the alignment, the text would have to go on the right of the input/
<ul>
<li>
<label><input /> Some Text</label>
</li>
</ul>
or
<ul>
<li>
<input /><label for="">Some Text</label>
</li>
</ul>
Rich
The simplest way would simply be to align them all to the right. I'm not sure if the "align" attribute works on the form element but you could try that, or wrap your code in a div or p element with align="right").
CSS is a better solution. Put a class on the form then use the CSS rule text-align: right; or simply add style="text-align: right" to the form element directly.
I don't see why you want to do that.
It doesn't meet your no css instruction, but you could use inline styles if you really just want no external css.
Perhaps you could use
CSS (and to a lesser extent- tables) are tools you are looking for.
Edit: Another way you could do this is with ghost pixel images. images that are a 1x1 alpha transparent png and you use the height and width attributes in to tell it how much you want to space. You'd might need some inline css to make sure things clear correctly.