When an HTML element is 'focused' (currently selected/tabbed into), many browsers (at least Safari and Chrome) will put a blue border around it.
For the layout I am working on, this is distracting and does not look right.
<input type="text" name="user" class="middle" id="user" tabindex="1" />
Firefox does not seem to do this, or at least, will let me control it with:
border: x;
If someone can tell me how IE performs, I would be curious.
Getting Safari to remove this little bit of flare would be nice.
Before you do that, keep in mind that the focus outline is an accessibility and usability feature; it clues the user into what element is currently focused, and a lot of users depend on it. You need to find some other means to make focus visible.
In your case, try:
input.middle:focus {
outline-width: 0;
}
Or in general, to affect all basic form elements:
input:focus,
select:focus,
textarea:focus,
button:focus {
outline: none;
}
In the comments, Noah Whitmore suggested taking this even further to support elements that have the contenteditable attribute set to true (effectively making them a type of input element). The following should target those as well (in CSS3 capable browsers):
[contenteditable="true"]:focus {
outline: none;
}
Although I wouldn't recommend it, for completeness' sake, you could always disable the focus outline on everything with this:
*:focus {
outline: none;
}
To remove it from all inputs
input {
outline:none;
}
This was confusing me for some time until I discovered the line was neither a border or an outline, it was a shadow. So to remove it I had to use this:
input:focus, input.form-control:focus {
outline:none !important;
outline-width: 0 !important;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
}
This is an old thread, but for reference it's important to note that disabling an input element's outline is not recommended as it hinders accessibility.
The outline property is there for a reason - providing users with a clear indication of keyboard focus. For further reading and additional sources about this subject see http://outlinenone.com/
This is a common concern.
The default outline that browsers render is ugly.
See this for example:
form,
label {
margin: 1em auto;
}
label {
display: block;
}
<form>
<label>Click to see the input below to see the outline</label>
<input type="text" placeholder="placeholder text" />
</form>
The most common "fix" that most recommend is outline:none - which if used incorrectly - is disaster for accessibility.
So...of what use is the outline anyway?
There's a very dry-cut website I found which explains everything well.
It provides visual feedback for links that have "focus" when
navigating a web document using the TAB key (or equivalent). This is
especially useful for folks who can't use a mouse or have a visual
impairment. If you remove the outline you are making your site
inaccessible for these people.
Ok, let's try it out same example as above, now use the TAB key to navigate.
form,
label {
margin: 1em auto;
}
label {
display: block;
}
<form>
<label>Click on this text and then use the TAB key to naviagte inside the snippet.</label>
<input type="text" placeholder="placeholder text" />
</form>
Notice how you can tell where the focus is even without clicking the input?
Now, let's try outline:none on our trusty <input>
So, once again, use the TAB key to navigate after clicking the text and see what happens.
form,
label {
margin: 1em auto;
}
label {
display: block;
}
input {
outline: none;
}
<form>
<label>Click on this text and then use the TAB key to naviagte inside the snippet.</label>
<input type="text" placeholder="placeholder text" />
</form>
See how it's more difficult to figure out where the focus is? The only telling sign is the cursor blinking. My example above is overly simplistic. In real-world situations, you wouldn't have only one element on the page. Something more along the lines of this.
.wrapper {
width: 500px;
max-width: 100%;
margin: 0 auto;
}
form,
label {
margin: 1em auto;
}
label {
display: block;
}
input {
outline: none;
}
<div class="wrapper">
<form>
<label>Click on this text and then use the TAB key to naviagte inside the snippet.</label>
<input type="text" placeholder="placeholder text" />
<input type="text" placeholder="placeholder text" />
<input type="text" placeholder="placeholder text" />
<input type="text" placeholder="placeholder text" />
<input type="text" placeholder="placeholder text" />
<input type="text" placeholder="placeholder text" />
</form>
<form>
First name:<br>
<input type="text" name="firstname"><br> Last name:<br>
<input type="text" name="lastname">
</form>
<form>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</form>
<form>
<label for="GET-name">Name:</label>
<input id="GET-name" type="text" name="name">
</form>
<form>
<label for="POST-name">Name:</label>
<input id="POST-name" type="text" name="name">
</form>
<form>
<fieldset>
<legend>Title</legend>
<input type="radio" name="radio" id="radio">
<label for="radio">Click me</label>
</fieldset>
</form>
</div>
Now compare that to the same template if we keep the outline:
.wrapper {
width: 500px;
max-width: 100%;
margin: 0 auto;
}
form,
label {
margin: 1em auto;
}
label {
display: block;
}
<div class="wrapper">
<form>
<label>Click on this text and then use the TAB key to naviagte inside the snippet.</label>
<input type="text" placeholder="placeholder text" />
<input type="text" placeholder="placeholder text" />
<input type="text" placeholder="placeholder text" />
<input type="text" placeholder="placeholder text" />
<input type="text" placeholder="placeholder text" />
<input type="text" placeholder="placeholder text" />
</form>
<form>
First name:<br>
<input type="text" name="firstname"><br> Last name:<br>
<input type="text" name="lastname">
</form>
<form>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</form>
<form>
<label for="GET-name">Name:</label>
<input id="GET-name" type="text" name="name">
</form>
<form>
<label for="POST-name">Name:</label>
<input id="POST-name" type="text" name="name">
</form>
<form>
<fieldset>
<legend>Title</legend>
<input type="radio" name="radio" id="radio">
<label for="radio">Click me</label>
</fieldset>
</form>
</div>
So we have established the following
Outlines are ugly
Removing them makes life more difficult.
So what's the answer?
Remove the ugly outline and add your own visual cues to indicate focus.
Here's a very simple example of what I mean.
I remove the outline and add a bottom border on :focus and :active. I also remove the default borders on the top, left and right sides by setting them to transparent on :focus and :active (personal preference)
form,
label {
margin: 1em auto;
}
label {
display: block;
}
input {
outline: none
}
input:focus,
input:active {
border-color: transparent;
border-bottom: 2px solid red
}
<form>
<label>Click to see the input below to see the outline</label>
<input type="text" placeholder="placeholder text" />
</form>
So, we try the approach above with our "real-world" example from earlier:
.wrapper {
width: 500px;
max-width: 100%;
margin: 0 auto;
}
form,
label {
margin: 1em auto;
}
label {
display: block;
}
input {
outline: none
}
input:focus,
input:active {
border-color: transparent;
border-bottom: 2px solid red
}
<div class="wrapper">
<form>
<label>Click on this text and then use the TAB key to naviagte inside the snippet.</label>
<input type="text" placeholder="placeholder text" />
<input type="text" placeholder="placeholder text" />
<input type="text" placeholder="placeholder text" />
<input type="text" placeholder="placeholder text" />
<input type="text" placeholder="placeholder text" />
<input type="text" placeholder="placeholder text" />
</form>
<form>
First name:<br>
<input type="text" name="firstname"><br> Last name:<br>
<input type="text" name="lastname">
</form>
<form>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</form>
<form>
<label for="GET-name">Name:</label>
<input id="GET-name" type="text" name="name">
</form>
<form>
<label for="POST-name">Name:</label>
<input id="POST-name" type="text" name="name">
</form>
<form>
<fieldset>
<legend>Title</legend>
<input type="radio" name="radio" id="radio">
<label for="radio">Click me</label>
</fieldset>
</form>
</div>
This can be extended further by using external libraries that build on the idea of modifying the "outline" as opposed to removing it entirely like Materialize
You can end up with something that is not ugly and works with very little effort
body {
background: #444
}
.wrapper {
padding: 2em;
width: 400px;
max-width: 100%;
text-align: center;
margin: 2em auto;
border: 1px solid #555
}
button,
.wrapper {
border-radius: 3px;
}
button {
padding: .25em 1em;
}
input,
label {
color: white !important;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/css/materialize.min.css" />
<div class="wrapper">
<form>
<input type="text" placeholder="Enter Username" name="uname" required>
<input type="password" placeholder="Enter Password" name="psw" required>
<button type="submit">Login</button>
</form>
</div>
The only solution that worked for me
The border is actually a shadow. So to hide it I had to do this:
input[type="text"]:focus{
box-shadow: 0 0 0 rgb(255, 255, 255);
}
input[type="checkbox"]:focus{
box-shadow: 0 0 0 rgb(255, 255, 255);
}
Edit 2021: you can now use this: https://github.com/WICG/focus-visible
Removing all focus styles is bad for accessibility and keyboard users in general. But outlines are ugly and providing a custom focussed style for every single interactive element can be a real pain.
So the best compromise I've found is to show the outline styles only when we detect that the user is using the keyboard to navigate. Basically, if the user presses TAB, we show the outlines and if he uses the mouse, we hide them.
It does not stop you from writing custom focus styles for some elements but at least it provides a good default.
This is how I do it:
// detect keyboard users
const keyboardUserCssClass = "keyboardUser";
function setIsKeyboardUser(isKeyboard) {
const { body } = document;
if (isKeyboard) {
body.classList.contains(keyboardUserCssClass) || body.classList.add(keyboardUserCssClass);
} else {
body.classList.remove(keyboardUserCssClass);
}
}
// This is a quick hack to activate focus styles only when the user is
// navigating with TAB key. This is the best compromise we've found to
// keep nice design without sacrifying accessibility.
document.addEventListener("keydown", e => {
if (e.key === "Tab") {
setIsKeyboardUser(true);
}
});
document.addEventListener("click", e => {
// Pressing ENTER on buttons triggers a click event with coordinates to 0
setIsKeyboardUser(!e.screenX && !e.screenY);
});
document.addEventListener("mousedown", e => {
setIsKeyboardUser(false);
});
body:not(.keyboardUser) *:focus {
outline: none;
}
<p>By default, you'll see no outline. But press TAB key and you'll see focussed element</p>
<button>This is a button</button>
This is anchor link
<input type="checkbox" />
<textarea>textarea</textarea>
<select/>
I tried all the answers and I still couldn't get mine to work on Mobile, until I found -webkit-tap-highlight-color.
So, what worked for me is...
* { -webkit-tap-highlight-color: transparent; }
:focus-visible
Good news for accessibility - Chrome & Firefox added support for
:focus-visible.
Hiding focus styles is bad practice due to accessibility requirements (keyboard navigation) which makes your websites less accessible.
Use :focus-visible pseudo-class and let the browser to determinate when to apply focus.
:focus-visible /* Chrome */
Note that Firefox supports similar functionality through an older, prefixed pseudo-class:
:-moz-focusring /* Firefox */
button {
color: #000;
background-color: #fff;
padding: 10px 16px;
margin: 10px 0;
border-radius: 4px;
}
button:focus {
box-shadow: 0 0 0 2px #E59700;
outline: 0;
}
button:hover {
background-color: #eee;
}
button.with-focus-visible:focus:not(:focus-visible) {
box-shadow: none;
outline: 0;
}
button.with-focus-visible:focus-visible,
button.with-focus-visible:moz-focusring {
box-shadow: 0 0 0 2px #E59700;
outline: 0;
}
<p>Click on the button using a mouse. Then try tabbing to the button.</p>
<button>without :focus-visible</button>
<button class="with-focus-visible">with :focus-visible</button>
docs: https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible
w3 specifications: https://www.w3.org/TR/selectors-4/#the-focus-visible-pseudo
You could use CSS to disable that!
This is the code I use for disabling the blue border:
*:focus {
outline: none;
}
This is a working example
Use this code:
input:focus {
outline: 0;
}
In Bootstrap 4 to remove border outline you can use shadow-none, it will remove focus outline.
<div class="form-group">
<label for="exampleInputEmail1">Name</label>
<input type="text" class="form-control form-control shadow-none"
id="exampleInputEmail1"aria-describedby="emailHelp">
</div>
The textarea on focus may have box-shadow.. It can be removed like so:
textarea:focus{
outline: none!important;
box-shadow: none!important;
}
You can try this also
input[type="text"] {
outline-style: none;
}
or
.classname input{
outline-style: none;
}
None of the solutions worked for me in Firefox.
The following solution changes the border style on focus for Firefox and sets the outline to none for other browsers.
I've effectively made the focus border go from a 3px blue glow to a border style that matches the text area border. Here's some border styles:
Dashed border (border 2px dashed red):
No border! (border 0px):
Textarea border (border 1px solid gray):
Here is the code:
input:focus, textarea:focus {
outline: none; /** For Safari, etc **/
border:1px solid gray; /** For Firefox **/
}
#textarea {
position:absolute;
top:10px;
left:10px;
right:10px;
width:calc(100% - 20px);
height:160px;
display:inline-block;
margin-top:-0.2em;
}
<textarea id="textarea">yo</textarea>
You can remove the orange or blue border (outline) around text/input boxes by using: outline:none
input {
background-color: transparent;
border: 0px solid;
height: 20px;
width: 160px;
color: #CCC;
outline:none !important;
}
try this css, it work for me
textarea:focus, input:focus{ border: none; }
Remove the outline when focus is on element, using below CSS property:
input:focus {
outline: 0;
}
This CSS property removes the outline for all input fields on focus or use pseudo class to remove outline of element using below CSS property.
.className input:focus {
outline: 0;
}
This property removes the outline for selected element.
Try this:
*:focus {
outline: none;
}
This would affect all your pages.
In case the above solutions din't work, you might be using the bootstrap and therefore the .form-control class is applying box-shadow css property to your input field by default.
The solution will be:
.form-control {
box-shadow: none;
}
You should actually not use outline: none because if someone is using a high-contrast view then they will not be able to see the state change on a dark backgroud. Instead, you should use:
outline-color: transparent;
I am trying to create a <form> as part of a project, which has text inputs with a label before them. I am trying to put the <label> and the <input> on the same line, aligned to the right side like this example project:
Here is the code I have attempted to use:
.labelrow {
text-align: right;
vertical-align: top;
}
.inputrow {
display: inline-block;
text-align: left;
vertical-align: top;
}
<form id="survey-form">
<div class="labelrow">
<label id="name" for="name">* Name:</label></div>
<div class="inputrow">
<input type="text" id="name" class="input-field" required placeholder="Enter your name"></div>
<div class="labelrow">
<label id="email" for="email">* Email:</label>
</div>
<div class="inputrow">
<input type="email" id="name" class="input-field" required placeholder="Enter your email">
</div>
</form>
This code gives me the result of this:
The <label> are aligned correctly, but the <input> are on the other line. What can I fix to get both on the same line and aligned to the right like the example?
Solution
House both label and input into a single div
Add display: flex to the parent so you can have more flexibility styling your fields on small screens. For example, you could move the label above the input on small screens when viewport space is limited using flex-direction: column
labels typically don't have ids. Instead, they point to form elements containing ids. I've fixed your labels in the following code
Duplicate ids are a no-no as well (also fixed)
.row {
display: flex;
align-items: center;
justify-content: flex-end;
}
.input-field {
margin-left: 1em;
padding: .5em;
margin-bottom: .5em;
}
<form id="survey-form">
<div class="row">
<label for="name">* Name:</label>
<input type="text" id="name" class="input-field" required placeholder="Enter your name">
</div>
<div class="row">
<label for="email">* Email:</label>
<input type="email" id="email" class="input-field" required placeholder="Enter your email">
</div>
</form>
By enclosing both elements into the same "div" you can align them together in a row.
<form id="survey-form">
<div class="inputrow">
<label id="name" for="name">* Name:</label>
<input type="text" id="name" class="input-field" required placeholder="Enter your name">
</div>
<div class="inputrow">
<label id="email" for="email">* Email:</label>
<input type="email" id="name" class="input-field" required placeholder="Enter your email">
</div>
</form>
By default, "div" tags always place a line break before and after they're inserted.
Potentially the simplest option is to put the input inside the label. Make the label a block item with text align right.
label {
display:block;
text-align:right;
margin: 5px;
}
<form id="survey-form">
<label id="name" for="name">* Name: <input type="text" id="name" class="input-field" required placeholder="Enter your name"></label>
<label id="email" for="email">* Email: <input type="email" id="name" class="input-field" required placeholder="Enter your email"></label>
</form>
Remove the <div>s and add a <br> after each <input>. Add the following to both <label> and <input>:
display: inline-block;
height: 1.2rem;
line-height: 1.2rem;
vertical-align: middle;
height and line-height can be adjusted but keep them equal to each other. Set <form> width to 100vw and of course text-align: right on <label>s. Place the <label>s and <input>s into a <fieldset> and assign the following to the <fieldset>
width: 50vw;
margin-left: 40vw;
border: 0px none transparent
BTW the <label>s have a duplicate #id which is invalid, therefore removed.
Demo
html,
body {
width: 100%;
height: 100%;
font: 400 16px/1.2 Raleway;
background: #FBFBFB;
}
form {
width: 70vw;
}
fieldset {
width: 50vw;
text-align: right;
margin-left: 20vw;
border: 0px none transparent;
background: none;
}
legend {
width: 70vw;
text-align:center;
margin: 0 auto;
}
label,
input,
button {
display: inline-block;
height: 1.2rem;
line-height: 1.2rem;
vertical-align: middle;
padding-left: 5px;
margin-top: 15px;
font: inherit;
}
input {
width: 60%;
max-width: 300px;
border-radius: 4px;
}
label {
width: 30%;
text-align: right;
}
button {
height: 1.5rem;
padding: 0 5px;
margin: 0 0 0 auto;
float: right;
cursor:pointer;
}
sup {
display:inline-block;
width: 25%;
margin-left: 70%;
margin-top: 10px;
text-align: right;
}
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<form id="survey-form">
<fieldset>
<legend>Let us know how we can improve freeCodeCamp</legend>
<label for="name">* Name:</label>
<input id="name" type="text" placeholder="Enter your name" required><br>
<label for="email">* Email:</label>
<input id="email" type="email" placeholder="Enter your email" required><br>
<label for="age">* Age:</label>
<input id="age" type="number" placeholder="Enter your age" min='18' max='120' required><br>
<sup>* Required</sup>
<button type='submit'>Submit</button>
</fieldset>
</form>
When you wrap each in their own div you get the stacking that you are seeing. Put both the label and the input into a single div.
This question already has answers here:
Flex / Grid layouts not working on button or fieldset elements
(3 answers)
Closed 5 years ago.
I am trying to create a form at the moment, that ideally with flex responds to the number of inputs with a group,
So I have a form setup like this:
<fieldset class="form__group">
<input type="text" class="form_input" />
<input type="text" class="form_input" />
</fieldset>
<fieldset class="form__group">
<input type="text" class="form_input" />
<input type="text" class="form_input" />
<input type="text" class="form_input" />
</fieldset>
<fieldset class="form__group">
<input type="text" class="form_input" />
</fieldset>
What I am trying to achieve is that the container does not care how many children it has but will allow them to fill the available space evenly in a single row.
So 2 items get 50% (minus a but for margins/padding), 3 items get 33.3% and 1 item 100% etc etc etc,
My CSS looks like this,
.form__group {
display: flex;
}
.form__input {
flex: 1 1 0;
background: #fff;
color: #939598;
border-radius: 30px;
box-shadow: none;
border: 1px solid #f1f2f2;
padding-left: 15px;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
}
Which I thought would allow me to put children inline on the same row and allow flex to sort out widths and spacing?
Here is my WIP at the moment,
https://codepen.io/87Development/project/editor/AoNJzN/
So using flex how can create a row of inline form inputs that are equally spaced and widthed, without knowing how many elements may be in each form__group?
fieldset can present some issues with rendering...use a div instead.
Fieldset # MDN
* {
box-sizing: border-box;
}
.form__group {
display: flex;
}
.form_input { /* note the single underscore */
flex: 1;
background: lightgrey;
color: #939598;
border-radius: 30px;
box-shadow: none;
border: 1px solid #f1f2f2;
padding-left: 15px;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
}
<div class="form__group">
<input type="text" class="form_input" />
<input type="text" class="form_input" />
</div>
<div class="form__group">
<input type="text" class="form_input" />
<input type="text" class="form_input" />
<input type="text" class="form_input" />
</div>
<div class="form__group">
<input type="text" class="form_input" />
</div>
How can I get my boxes to align with my text?
I have also copy and pasted the html/css code in jsFiddle!
http://jsfiddle.net/EFByC/51/
<form
action="http://www.sblogger/cgi-bin/subcomments"
method="post" >
<fieldset name="commentFS" id="commentFS">
<label for="username">Username</label>
<input name="username" id="username" title="Supply your username" required="required"/>
<label for="email">E-mail</label>
<input name="email" id="email" type="email" title="Supply a valid e-mail address" required="required"/>
<label for="password">Password</label>
<input name="password" id="password" type="password" title="You must provide your password" required="required"/>
<label for="commentbox">Comment<br />
(500 character limit)</label>
<textarea maxlength="500" name="commentbox" id="commentbox"></textarea>
<input type="submit" value="Submit Comment"/>
</fieldset>
</form>
here you go, edited your Fiddle
It comes down to this:
If you float left & right, you need a wrapper to preserve the room for the floats.
so i added this:
p {
overflow: hidden;/*this should be clearfix, just for demo it is overflow fix*/
}
label{
display: block;
float: left;
font-size: 0.9em;
width: 20%;/* was 100%*/
margin-top: 5px;
margin-bottom: 5px;
/*clear: left*/
}
and the wrapper:
<p>
<label for="username">Username</label>
<input name="username" id="username" title="Supply your username" required="required">
</p>
i see you use float, display and width:100%; , you definitly have too much unnedeed rules here .
inline-block + width, can do it and allow you to vertiacal-align labels and inputs,
float+clear can work too, but vertical-align will not be avalaible :
example with inline-block:
/*Field set styles */
fieldset {
background-color: rgb(245,245,255);
margin: 15px auto;
padding: 5px;
width: 90%;
}
/* Label Styles */
label{
display: inline-block;
font-size: 0.9em;
margin-top: 5px;
margin-bottom: 5px;
width:35%;
}
/*Input control styles */
input, textarea {
font-size: 0.9em;
margin-left: 10px;
margin-right: 10px;
width: 55%;
vertical-align:middle;
}
/*Text area styles */
textarea {
height: 150px;
}
http://jsfiddle.net/EFByC/58/
I have been trying to edit this easy form to just look good for 3 hours now and Im still not quite there. I want the input fields to be on the same row as the labels naturally, but somehow the inputs are a bit lower than the labels and I cant seem to edit them with margins. What am I doing wrong?
Heres a snaggy picture of what the form looks like:
// CONTACT FORM
<label for="name"><p>Name:</p></label>
<input type="text" name="name" id="name" tabindex="1" />
<br/>
<label for="email"><p>Email:</p></label>
<input type="text" name="email" id="email" tabindex="2" />
<br/>
<label for="subject"><p>Subject:</p></label>
<input type="text" name="subject" id="subject" tabindex="3" />
<br/>
<label for="comments"><p>Comments:</p></label>
<textarea name="comments" id="comments" cols="45" rows="5" tabindex="4"></textarea>
<br/>
<label for="submit"></label>
<input type="submit" name="submit" id="submit" value="Submit" tabindex="5" />
<label for="reset"></label>
<input type="reset" name="reset" id="reset" value="Clear" tabindex="6" />
// CSS
label {
float: none;
font-size: 100%;
width: 250px; /* just this width evens out input box placement */
font-weight: bold;
}
input { /*I think these just fall in because they are naturally following the labels!*/
width: 250px;
padding:5px;
margin-top: -10px;
}
textarea {
width: 250px;
height: 150px;
resize:none;
}
guestbook {
margin-top:50px;
text-align:center;
font-size:26px;
color:#05924b;
font-family:Gisha;
}
gb p {
color:#05924b;
font-family:Gisha;
text-align:left;
margin-left:85px;
margin-top:0px;
margin-bottom:0px;
}
// SOLUTION: Removed the "p" paragraph from within the form and adjusted the rest from CSS, added float:left to the different inputs fields and rows, lowered the label width so the input came closer, then calculated and put the correct margin-right to both input{} and textarea{} and last to #submit to get everything in nice order.
Heres a screenshot from the new code: http://snag.gy/PwpbQ.jpg
// CSS
/* Input */
label {
float: left;
font-size: 100%;
width: 50px; /* just this width evens out input box placement */
font-weight: bold;
margin: 2px 0;
padding:5px;
font-family: Gisha;
font-style: normal;
font-variant: normal;
text-decoration: none;
text-align: left;
}
input { /*I think these just fall in because they are naturally following the labels!*/
width: 300px;
padding:5px;
margin: 5px 0;
font-size:24px;
margin-right:192px;
}
textarea {
width: 300px;
height: 150px;
resize:none;
margin:5px 0;
padding:5px;
margin-right:192px;
}
#submit {
margin-right:225px;
}
/* End of input */
Remove all of the <p> tags from the labels. A <p> tag is a block level element, therefore it should not be nested within the inline element <label>. Block level elements also clear, meaning they do not allow content on either side (unless floated). I believe this is causing your issue.
<label for="name">Name:</label>
<input type="text" name="name" id="name" tabindex="1" />
<br/>
<label for="email">Email:</label>
<input type="text" name="email" id="email" tabindex="2" />
<br/>
<label for="subject">Subject:</label>
<input type="text" name="subject" id="subject" tabindex="3" />
<br/>
<label for="comments">Comments:</label>
<textarea name="comments" id="comments" cols="45" rows="5" tabindex="4"></textarea>
<br/>
<label for="submit"></label>
<input type="submit" name="submit" id="submit" value="Submit" tabindex="5" />
<label for="reset"></label>
<input type="reset" name="reset" id="reset" value="Clear" tabindex="6" />
Once the markup has been adjusted the label and input tags have no vertical spacing. To add vertical spacing you can add a margin to both elements.
label {
font-size: 100%;
width: 250px;
font-weight: bold;
margin: 2px 0;
}
input {
width: 250px;
padding:5px;
margin: 2px 0;
}
Example: http://jsfiddle.net/KZrXD/