I am trying to use a fieldset legend as a label for a group of radio buttons. The HTML and CSS I have works fine in IE8&9, firefox and chrome. In IE7 the label appears over the radio buttons. In all other browsers the label appears to the left of the buttons. I am happy to add a conditional stle for IE7 but I cant figure out what would make this work.
The problem is replicated in the following markup
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<style type="text/css">
.radiolegend {
display: inline; float: left; width: 300px;
}
.fieldsetstyle {
border: 0 none; clear: left; float: left;
}
</style>
</head>
<body>
<form>
<fieldset class="fieldsetstyle">
<legend class="radiolegend">legend</legend>
<input type="radio" name="r1" style="display: inline;" id="r1">
<label for="r1">r1</label>
<input type="radio" name="r2" style="display: inline;" id="r2">
<label for="r2">r2</label>
</fieldset>
</form>
</body>
</html>
If you want ie7 conditional, then do this:
CSS
.radiolegend {
float: left; width: 150px;
}
.fieldsetstyle {
border: 0 none; clear: left; float: left; width:300px;
}
.cb{
float:right;
margin-top:-20px;
}
HTML
<form>
<fieldset class="fieldsetstyle">
<legend class="radiolegend">legend</legend>
<div class="cb"><input type="radio" name="r1" style="display: inline;"/>r1</div>
<div class="cb"> <input type="radio" name="r2" style="display: inline;"/>r2 </div>
</fieldset></form>
Now, you need to change styling for the rest of the browsers too. Just remove margin-top:-20px; from .cb. You were wrapping text in <input> tag, it's not correct. <input> has to be self closing
Related
I have a form and I am trying to make a row "justified" so the entire row (which is a 4 textboxes and labels) to fit an exact pixel width (lets say 800px). Normally, if i just lay it out without any special css, It is less than 800px. I want to "stretch" it to be 800px. I don't care if I have to stretch the textboxes or the spaces in between them.
This is similar to justified layout in MS word if that helps describe what i am looking for. Is this possible within html / css in a form layout?
You basically need text-align-last: justify which specifies the justification of the "last text line" in a block element, this defaults namely to the standard direction, which is left in LTR.
<!DOCTYPE html>
<html lang="en">
<head>
<title>SO question 15994654</title>
<style>
#fields {
width: 1000px;
border: 1px solid gray;
}
.justified {
text-align-last: justify;
}
</style>
</head>
<body>
<p id="fields" class="justified">
<label for="input1">label1</label>
<input id="input1" />
<label for="input2">label2</label>
<input id="input2" />
<label for="input3">label3</label>
<input id="input3" />
<label for="input4">label4</label>
<input id="input4" />
<p>
</body>
</html>
This works in IE and Firefox (for older Firefox versions, add -moz-text-align-last: justify if necessary), however this fails in Webkit based browsers (Chrome/Safari). To cover those browser as well, you'd need to replace .justified as follows, so that the last line doesn't appear as a "last line" anymore, so that text-align: justify can do its job the usual way:
.justified {
text-align: justify;
}
.justified:after {
content: '';
display: inline-block;
width: 100%;
}
Note that the text-align-last: justify becomes redundant this way.
Here's the jsfiddle demo.
Actually, there's a very natural way to do this with pure CSS using text-align: justify;.
You didn't succeed because justification doesn't work for the last line (and when there's only one line, it's considered to be the last). There's a CSS3 property that sets text alignment for the last line: text-align-last. Unfortunately, it is not broadly supported.
The solution is to spawn an extra element that will drop to next line, then the first line will be justified:
<form>
<input type="text" value="" />
<input type="text" value="" />
<input type="text" value="" />
<input type="text" value="" />
</form>
form {
width: 800px;
text-align: justify; /* Can we really make this work? Sure! */
}
input {
display: inline-block; /* making elements respect text-align */
}
form:after {
content: ""; /* creating a hidden element that drops to next line */
display: inline-block; /* making it respect text-align and width */
width: 100%; /* forcing it to drop to next line */
}
Demo: http://jsbin.com/ituroj/5/ (click "edit" in top right corner to fiddle with the code).
Result: semantic, no HTML footprint, minimal CSS code, full browser support.
One approach would be:
input[type=text] {
width: 25%;
box-sizing: border-box;
}
Or, if the fields are really inside a <table/> like in this Fiddle, you can set the width of the textboxes to 100%, so the table controls the width:
input[type=text] {
width: 100%;
box-sizing: border-box;
}
You can do it by nesting the input and labels inside of 'columns' that you determine the width of by percentage - this way you can control the width of the form and the inputs will stay justified.
HTML
<form>
<div class="col4">
<label>Input</label>
<div class="inputWrapper">
<div class="textInput">
<input type="text"/>
</div>
</div>
</div>
<div class="col4">
<label>Input</label>
<div class="inputWrapper">
<div class="textInput">
<input type="text"/>
</div>
</div>
</div>
<div class="col4">
<label>Input</label>
<div class="inputWrapper">
<div class="textInput">
<input type="text"/>
</div>
</div>
</div>
<div class="col4 last">
<label>Input</label>
<div class="inputWrapper">
<div class="textInput">
<input type="text"/>
</div>
</div>
</div>
</form>
CSS
form{
width:800px;
}
.col4{
width:23.5%;
margin-right:2%;
float:left;
}
.last{
margin:0;
}
.inputWrapper{
width:100%;
}
.textInput{
border:1px solid #ccc;
display:block;
padding:5px;
}
.textInput input{
width:100%;
border:none;
padding:0;
}
You can see a jsFiddle example here http://jsfiddle.net/patricklyver/4mbks/
You can combine float with box-sizing. You will have to float, because forms have different weirdness around them in different browsers. For example in Safari on OS X there is always a hidden 1px padding on the top.
JSfiddle
HTML
<form id="myForm">
<input type="text" value="" />
<input type="text" value="" />
<input type="text" value="" />
<input type="text" value="" />
<div class="clear"></div>
</form>
CSS
#myForm {
border: 1px solid blue;
width: 800px;
}
#myForm input[type=text] {
margin: 0px;
display: block;
float: left;
box-sizing: border-box;
width: 25%;
border: 0px;
background-color: orange;
}
#myForm .clear {
clear: both;
}
Is possible align SELECT and INPUT inline without specify WIDTH size, without using tables and with the same HTML? See picture.
Live example: http://jsfiddle.net/N4hpQ/
Thank you.
<html>
<head>
<style>
fieldset {
display: inline-block;
}
fieldset input,
fieldset select{
float: right;
margin-left: 5px;
}
fieldset p {
text-align: right;
}
</style>
</head>
<body>
<fieldset>
<p><label>First Name: </label><input type="text" /></p>
<p><label>Second Name: </label><input type="text" /></p>
<p><label>Country: </label><select><option>Choose</option></select></p>
<p><label>Age: </label><select><option>Choose</option></select></p>
</fieldset>
</body>
</html>
You could use css display: table; to achieve this.
HTML
<fieldset>
<p>
<label>First Name: </label>
<input type="text" />
</p>
<p>
<label>Second Name: </label>
<input type="text" />
</p>
<p>
<label>Country: </label>
<select>
<option>Choose</option>
</select>
</p>
<p>
<label>Age: </label>
<select>
<option>Choose</option>
</select>
</p>
</fieldset>
CSS
fieldset {
display: table;
}
fieldset p {
display: table-row;
}
fieldset input,
fieldset select,
fieldset label {
display: table-cell;
margin: 3px;
}
fieldset label {
text-align: right;
}
Demo
Without TABLE or width.
CSS:
FIELDSET {
display: inline-block;
line-height: 200%;
}
.labels {
text-align: right;
float: left;
margin-right: 5px;
}
.inputs {
float: left;
}
And HTML:
<fieldset>
<div class="labels">
<label>First Name: </label><br />
<label>Second Name: </label><br />
<label>Country: </label><br />
<label>Age: </label>
</div>
<div class="inputs">
<input type="text" /><br />
<input type="text" /><br />
<select><option>Choose</option></select><br />
<select><option>Choose</option></select>
</div>
</fieldset>
And the fiddle
EDIT
It seems that you've edited your question. If the same HTML (as in your example) is required, my answer is not valid anymore.
Possible? Yes, here's a quick hack to do it even:
float your labels left, float your inputs right, then give the inputs a margin-right, to put them in position to be next to your labels.
so would look like this:
p label{
float:left;
}
p input{
float:right;
margin-right: /*whatever value you need this to be to look good*/;
}
here is the jsfiddle.
I have a seemingly easy problem to solve, but am struggling. How do I get these two inputs to align to the right of the form, without using the BR element ?
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
form {
text-align: right;
}
input {
width: 100px;
}
</style>
</head>
<body>
<form>
<input name="declared_first" value="above" />
<br/> <!-- I want to get rid of this -->
<input name="declared_second" value="below" />
</form>
</body>
</html>
I just want the first input to appear above the second input, both on the right hand side.
You can use floating to the right and clear them.
form {
overflow: hidden;
}
input {
float: right;
clear: both;
}
<form>
<input name="declared_first" value="above" />
<input name="declared_second" value="below" />
</form>
You can also set a right-to-left direction to the parent and restore the default left-to-right on the inputs. With display: block you can force them to be on different lines.
form {
direction: rtl;
}
input {
display: block;
direction: ltr;
}
<form>
<input name="declared_first" value="above" />
<input name="declared_second" value="below" />
</form>
Or the modern way, flexbox layout
form {
display: flex;
flex-direction: column;
align-items: flex-end;
}
<form>
<input name="declared_first" value="above" />
<input name="declared_second" value="below" />
</form>
Try use this:
<html>
<body>
<input type="text" style="direction: rtl;" value="1">
<input type="text" style="direction: rtl;" value="10">
<input type="text" style="direction: rtl;" value="100">
</body>
</html>
input { float: right; clear: both; }
Try this:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p {
text-align: right;
}
input {
width: 100px;
}
</style>
</head>
<body>
<form>
<p>
<input name="declared_first" value="above" />
</p>
<p>
<input name="declared_second" value="below" />
</p>
</form>
</body>
</html>
To affect ONLY text type input boxes use the attribute selector
input[type="text"]
This way it will not affect other inputs and just text inputs.
https://www.w3schools.com/css/css_attribute_selectors.asp
example, use a div and give it an idea to refer to:
#divEntry input[type="text"] {
text-align: right;}
Use some tag, to aligning the input element.
So
<form>
<div>
<input>
<br />
<input>
</div>
</form>
.mydiv
{
width: 500px;
height: 250px;
display: table;
text-align: right;
}
I answered this question in a blog post: https://wscherphof.wordpress.com/2015/06/17/right-align-form-elements-with-css/
It refers to this fiddle: https://jsfiddle.net/wscherphof/9sfcw4ht/9/
Spoiler: float: right; is the right direction, but it takes just a little more attention to get neat results.
Try use this:
input {
clear: both;
float: right;
margin-bottom: 10px;
width: 100px;
}
html code
<div id="signup">
<p>
<label>Frist Name</label>
<input type="text"/>
<p>
<p>
<label>Last Name</label>
<input type="text"/>
<p>
<p>
<label>Email</label>
<input type="text"/>
<p>
<p>
<label>Mobile Number</label>
<input type="text"/>
<p>
<p>
<label>Password</label>
<input type="password"/>
<p>
<p>
<label>Re Password</label>
<input type="password"/>
<p>
</div>
and this is css
css
#signup{
width: 860px;
background-color: white;
border: 1px black solid;
padding: 0px;
margin: 0px;
}
#signup p label{
padding: 0.4em;
color: #0986e3;
}
#signup p input{
width: 300px;
padding: 0.4em;
}
if u run this code u will see the input files right and left , and that is not good , i can correct this problems using div or li , but i want the best practice for doing that , i want the input filds to be exaclty below each other
,this is the code in jsfiddle
http://jsfiddle.net/Wiliam_Kinaan/EfBD7/
Make the labels display as block elements. That way, you can set it's width. But you still need them to be inline. You need to apply either float:left, or display:inline-block so they act inline as well as block.
#signup p label{
display:inline-block;
width:100px;
}
/*or*/
#signup p label{
float:left;
width:100px;
}
If you want to support older browsers, then use the float:left. If you target new browsers, then display:inline-block is better. If you use the float approach, add this to the CSS to clear the float:
#signup p{
overflow:hidden;
zoom:1;
}
Here, I did it how I would do it. I stripped out the p and some css to make text right side. but you can of course add display:inline-block;width:300px; to the label and swap the label and input locations in html
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#signup{
width: 500px;
background-color: #ececec;
border: 1px black solid;
padding: 0px;
margin: 0px;
}
#signup label{
font:12px arial;
color: #0986e3;
}
#signup input{
margin:10px;
width: 300px;
padding 0.4em;
}
#signup input[type=button]{
margin:10px;
width: 80px;
padding 0.4em;
}
</style>
</head>
<body>
<div id="signup">
<input type="text"/>
<label>Frist Name</label>
<input type="text"/>
<label>Last Name</label>
<input type="text"/>
<label>Email</label>
<input type="text"/>
<label>Mobile Number</label>
<input type="password"/>
<label>Password</label>
<input type="password"/>
<label>Re Password</label>
<input type="button" value="click me!" />
</div>
</body>
</html>
Give the label a definite width, like:
#signup p label{
padding: 0.4em;
color: #0986e3;
width: 100px;
display: inline-block;
}
Can you use table , might help your cause , see the example , sorry for not aligning the markup well.
Assuming the following markup:
<fieldset>
<legend>Radio Buttons</legend>
<ol>
<li>
<input type="radio" id="x">
<label for="x"><!-- Insert multi-line markup here --></label>
</li>
<li>
<input type="radio" id="x">
<label for="x"><!-- Insert multi-line markup here --></label>
</li>
</ol>
</fieldset>
How do I style radio button labels so that they look like the following in most browsers (IE6+, FF, Safari, Chrome:
I believe this does it all. You didn't mention that it has to validate, however, so I used the inline-block (-moz-inline-box) display. One of my favorites, actually.
Here's a working copy
Tested in Safari 3, FireFox 3, and IE7.
<style type="text/css">
ol{
padding-left: 0;
margin-left:0;
}
ol>li {
list-style-type: none;
margin-bottom: .5em;
}
ol>li input[type=radio] {
display: -moz-inline-box;
display: inline-block;
vertical-align: middle;
}
ol>li label {
display: -moz-inline-box;
display: inline-block;
vertical-align: middle;
}
</style>
Using the following markup and css I was able to produce multi-line labels that do not wrap under the radio button:
<style type="text/css">
fieldset input, label {
float: left;
display: block;
}
fieldset li {
clear: both;
}
</style>
<fieldset>
<ol>
<li>
<input type="radio" id="x" />
<label for="x">
stuff<br/>
stuff1
</label>
</li>
<li>
<input type="radio" id="x" />
<label for="x">
stuff<br/>
stuff1
</label>
</li>
</ol>
</fieldset>
however I was unable to use:
fieldset label {
vertical-align: middle;
}
to center the label vertically on the radio button, even when applying a width (both suggestions in Dmitri Farkov's answer. My main purpose was to prevent wrapping under the radio button, so this solution will be fine for the time being.
Since I asked how to handle really long labels above, and I finally solved it myself. Here is the solution to my problem. Maybe it could help you to?
<style type="text/css">
#master_frame {
background: #BBB;
height: 300px;
width: 300px;
}
fieldset.radios {
border: none;
}
fieldset fields {
clear: both;
}
input {
float: left;
display: block;
}
label {
position: relative;
margin-left: 30px;
display: block;
}
</style>
<div id="master_frame">
<fieldset class='radios'>
<div class='field'>
<input type="radio" id="a" />
<label for="a">Short</label>
</div>
<div class='field'>
<input type="radio" id="b" />
<label for="b">
A really long and massive text that does not fit on one row!
</label>
</div>
</fieldset>
</div>
Make input and label both
float: left;
display: block;
Set width's for the label and input.
apply
clear: both;
vertical-align: middle;
to all the li's.
You should use white-space: normal; in label for multiline