I made the input box bigger (like 500 by 500 pixels), but the text would start from the middle, not the top. I tried putting the padding to zero but it doesn't seem to work. This is under the form tag.
Here's my html code:
<form>
<input class="postbox" value="Hello."><br>
</form>
and this is my css code:
.postbox{
padding:0;
height:500;
width:500;}
you stretched the input-line to 500px, not the form.
As Alvaro Menéndez noticed, you might want to use a textarea, not an input.
Use something like
<form>
<textarea class="postbox" placeholder="Hello"></textarea><br>
</form>
<style>
.postbox {
padding:0;
height:500px;
width:500px;
}
</style>
http://pascha.org/test/2.php
Something like this might do it, i have removed the height and padded the input out
.postbox{
padding-bottom:450px;
width:500px;
}
You can do that by using the padding-bottom property
HTML
<input type="text" value="test"/>
CSS
input {
padding: 10px 10px 100px;
width: 300px;
border: 1px solid red;
}
JSFiddle: http://jsfiddle.net/LeoAref/ko9ahz0L/
Imagine the following illustrative HTML:
<form>
<div class="line">
<label class="lbt" for="name">Name:</label>
<span class="obr">*</span>
<input id="name" class="inp" type="text" />
<span class="err">Missing!</span>
</div>
<div class="line">
<label class="lbt" for="area">Area:</label>
<input name="area" class="inp" type="text" />
<span class="suf">m<span style="vertical-align: super;">2</span></span>
<span class="err">Missing!</span>
</div>
</form>
By client requirement, both the label and the span with the obligatory indicator must be in the same line, being the input and the rest of the spans in the next line.
The obligatory indicator must be right after the label text and the other spans right after the input element.
Sadly I can't change the HTML code or I would put the obligatory element inside the label and use a display: block style (or wrap both in a span and do the same).
I tried using the .obr::after to create a line break but since this element doesn't always exist and I can't use ::before in an input element so I tend to believe using content isn't feasible unless there's a way to put it conditionally (.lbt::after or in .obr::after if exists). Here's a jsfiddle with this problem.
I also tried float and positions approaches but haven't found a good generic solution that could fit any label or input size.
I may consider using jQuery for this, but I would prefer a simpler approach only by CSS.
Been almost two days trying to find a good solution...
label and the * <span> right beside each other.
<input /> and the other <span> beside each other on another line.
.line
{
border: 2px solid black;
padding: 5px;
overflow:hidden;
}
.line .obr
{
color: Red;
font-weight: bold;
float:left;
}
.lbt
{
float:left;
}
.line .obr::after
{
content: '\A';
white-space: pre;
}
.inp
{
float:left; clear:both;
margin-top:5px;
}
.line span
{
float:left;
}
Check this out : http://jsfiddle.net/AliBassam/2LqCc/
If you want the <span> beside the <input /> to be lower then add margin-top:5px;
I'm a beginner to CSS, and i want to know the best technique to position elements in a form using only CSS. I just can't get my two buttons to align probably beside each other...
Here's my HTML code :
<form action="creat_fam.php" method ="post" >
<div id="formWrapper">
<label for="fam_name">Family Name : </label>
<input type="text" placeholder="Family Name" name="fam_name" required>
<br/>
<label for="people_count">People count : </label>
<input type="number" name="people_count" min="1" value="1" required>
<br/>
<label for="location">Location : </label>
<input type="text" name="location" placeholder="location" required>
<br/>
<input type="reset" value="Reset">
<input type="submit" name="submit" value="Done">
</div>
</form>
And my CSS code :
#formWrapper {
width : 400px;
padding : 15px;
-webkit-box-sizing : border-box;
}
#formWrapper label {
float:left;
margin-bottom : 15px;
line-height: 25px;
}
#formWrapper input[type="text"] , #formWrapper input[type="number"] {
float :right;
margin-bottom : 10px;
padding : 2px;
width : 250px;
height: 25px;
border:1px solid gray;
}
#formWrapper input[name="submit"] , #formWrapper input[type="reset"] {
margin : 0;
width : 90px;
height: 40px;
border : none;
border-radius : 4px;
background : -webkit-gradient(linear , 0 0, 0 100% , from(#7f7f7f) ,to(#535353));
color : lightgray;
font-weight: bold;
cursor : pointer;
}
And all i get is this :
Thanks in advance.
Although inputs are inline elements, your second button is going to the next line because of the location input. The location input takes up a little bit of invisible space (the margin-bottom) next to the first button, causing the second button to wrap.
Adding float:left; into #formWrapper input[name="submit"] , #formWrapper input[type="reset"] {
} will align the boxes horizontally, the i would put the buttons in their own div and play around with margins so they align right.
I realise this is an older question, but it is prominent in search results, so hopefully this will help others.
Using developer tools, one can see that the container will appear much smaller than the total height of the collective fields. To avoid the need for adjusting margins to 'make it fit', wrap the buttons in their own div (e.g. #buttonsDiv) as suggested by Jack, but apply the CSS of clear:both to the div instead.
Any formatting performed on the buttons will then apply independently from the content above, allowing the buttons to be positioned next to each other effortlessly.
I want to display a checkbox, followed by some text that wraps around below itself. The HTML without any CSS looks as follows:
<input type="checkbox" checked="checked" />
<div>Long text description here</div>
I want it to display similar to:
X Long Text
Description
Here
It currently wraps around like this
X Long Text
Description Here
This is easy to do with tables, but I need it to be in CSS for other reasons. I thought a combination of display: inline-block / float: right / clear / spans instead of DIVs would work, but I've had no luck so far.
Wrap the checkbox and label in a container div (or li - i do forms with lists often) and apply
<div class="checkbox">
<input type="checkbox" id="agree" />
<label for="agree">I agree with checkbox</label>
</div>
.checkbox input {
float:left;
display:block;
margin:3px 3px 0 0;
padding:0;
width:13px;
height:13px;
}
.checkbox label {
float:left;
display:block;
width:auto;
}
Try this:
input { float: left; }
div { margin-left: 40px; }
Tune the margin-left to how much space you want. The float: left on the checkbox basically takes it out of the block layout so it doesn't push down the text.
I have been asked to vertically align the text in the labels for the fields in a form but I don't understand why they are not moving. I have tried putting in-line styles using vertical-align:top; and other attributes like bottom and middle but it doesn't work.
Any ideas?
<dd>
<label class="<?=$email_confirm_class;?>"
style="text-align:right; padding-right:3px">Confirm Email</label>
<input class="text" type="text"
style="border:none;" name="email_confirm"
id="email_confirm" size="18" value="<?=$_POST['email_confirm'];?>"
tabindex="4" />
*
</dd>
You can use flexbox in 2018+:
.label-class {
display: flex;
align-items: center;
}
Browser support: https://caniuse.com/#search=flexbox
Vertical alignment only works with inline or inline-block elements, and it's only relative to other inline[-block] elements. Because you float the label, it becomes a block element.
The simplest solution in your case is to set the label to display: inline-block and add vertical-align: middle to the labels and the inputs. (You might find that the height of the text is such that vertical align won't make any difference anyway.)
Have you tried line-height? It won't solve your problems if there are multiple row labels, but it can be a quick solution.
The vertical-align style is used in table cells, so that won't do anything for you here.
To align the labels to the input boxes, you can use line-height:
line-height: 25px;
I had a similar problem and solved it wrapping the label into a div and setting the following styles:
<div style="display: table; vertical-align: middle">
<label style="display: table-cell;" ... > ... </label>
</div>
This is what I usually do to "vertical align" text inside labels:
label {
display: block;
float: left;
padding-top: 2px; /*This needs to be modified to fit */
}
It won't scale very nicely, but it works.
I came across this trying to add labels o some vertical radio boxes. I had to do this:
<%: Html.RadioButton("RadioGroup1", "Yes") %><label style="display:inline-block;padding-top:2px;">Yes</label><br />
<%: Html.RadioButton("RadioGroup1", "No") %><label style="display:inline-block;padding-top:3px;">No</label><br />
<%: Html.RadioButton("RadioGroup1", "Maybe") %><label style="display:inline-block;padding-top:4px;">Maybe</label><br />
This gets them to display properly, where the label is centered on the radio button, though I had to increment the top padding with each line, as you can see. The code isn't pretty, but the result is.
label {
padding: 10px 0;
position: relative;
}
Add some padding-top and padding-bottom instead of height.
Use css on your label.
For example:
label {line-height:1em; margin:2px 5px 3px 5px; padding:2px 5px 3px 5px;}
Notice that the line-height will adjust the height of the line itself, whereas margin will dictate how far out other elements will be outside the lable and padding will dictate any inner space from the outside edge of the label. The margin and padding work like this (clockwise: Top Right Bottom Left), so 2px 5px 3px 5px is:
2px Top
5px Right
3px Bottom
5px Left
To do this you should alter the vertical-align property of the input.
<dd><label class="<?=$email_confirm_class;?>" style="text-align:right; padding-right:3px">Confirm Email</label><input class="text" type="text" style="vertical-align: middle; border:none;" name="email_confirm" id="email_confirm" size="18" value="<?=$_POST['email_confirm'];?>" tabindex="4" /> *</dd>
Here is a more complete version. It has been tested in IE 8 and it works.
see the difference by removing the vertical-align: middle from the input:
<html><head></head><body><dl><dt>test</dt><dd><label class="test" style="text-align:right; padding-right:3px">Confirm Email</label><input class="text" type="text" style="vertical-align: middle; font-size: 22px" name="email_confirm" id="email_confirm" size="28" value="test" tabindex="4" /> *</dd></dl></body></html>
Adding disply:flex property to the label will get the job done!
None of these worked for me. I am using ASP.Net MVC with Bootstrap.
I used the following successfully:
.label-middle {
padding-top:6px;
}
<label id="lblX" class="label-middle" ></label>
This vertically aligned the label with the textbox next to it.
If your label is in table, padding may cause it to expand. To avoid this you may use margin:
div label {
display: block;
text-align: left;
margin-bottom: -0.2%;
}
You don't have to add any padding or edit the line-height!
Instead, just make sure that when you have an HTML like this :
<label><input type="checkbox" name=""><span>Checkbox Text</span></label>
Just make sure that the input height and width are the same, and the the text has the same font size.
Then, it will look perfectly fine and looks centered.
You have this:
<label class="styling_target">Label Text</label>
<input />
Do this instead:
<label>
<span class="styling_target">Label Text</span>
<input />
</label>
Styling a label doesn't really work, but you can have arbitrary HTML inside it, and you can style that.
Force relative positions to provide top/bottom adjustments
.whatever {
position: relative;
}
.whatever .input {
position: relative;
}
.whatever span {
position: relative;
top: -2px; /* adjust this up or down */
}
<label class="whatever">
<input type="checkbox"><span>my thing</span>
</label>
Just set the vertical-align property of the label to top.
label {
vertical-align: top;
}
<label for="desc">Description</label>
<textarea name="desc" id="desc" cols="30" rows="10"></textarea>
Lacking in elegance, pure html, no CSS solution:
<table>
<tr>
<td>
<label></label>
</td>
</tr>
<tr>
<td>
<input></input>
</td>
</tr>
</table>