Floating Label over input
This <span> shall be raised when the <input> is :focus or when it holds a value, sadly there is no pseudo-class for that.
Possible hacks involves :
- adding a [required] so the input is :invalid state when empty => bad : it prevent any form submit
- adding a [placeholder] so the input has a :placeholder-shown state => require an empty placeholder
the default state must be usable.
In case of bad CSS support, we don’t want our input to be covered by the span, so we revert the logic in order to pull-down the span in the following case :
The span shall cover the input if the input has an blank placeholder and is neither focus nor filled.
Positioning the label over the input, How-To?
I’m trying to position the labels on the inputs but seems like they are not moving on them until i change their position to absolute (which i don’t need).
Here is an example of my code:
Here is the CSS:
And here is what i get:
Now here is the thing I’m trying to duplicate and for some weird reason it works here but not on my side. The demo I’m trying to duplicate with my own CSS properties
4 Answers 4
The demo you linked to adds a negative margin-right to the <label> tag to pull it over the top of the <input> . You don’t have that in the CSS you’ve posted.
As an addendum to that answer:
You can set the placeholder attribute equal to what you have in your label , then hide the label with CSS. This gets you exactly what you want, with minimal work.
I think basically what you are wanting to do already exists in many «Watermark» jQuery plugins.
Google «jQuery Watermark» and you will get loads of versions. Means that you don’t need to play around with the hmtl/css/jquery yourself
EDITS
If you want to go down the route you are going, then just position the Labels with some jQuery. Check out this Fiddle for an example: http://jsfiddle.net/EM7Pz/1/ You will see that you position the labels absolutely, then with the jQuery, you change their positions to the position of the inputs that they need to be in. This way you can then change their color, size, etc. as you want and gives you more control than a Watermark plugin
I have also given the input an absolutely positioned style just to demonstrate that it doesn’t matter where the input is, the label will always appear inside.
Styling Form with Label above Inputs
What would be the best way to do this? I keep getting in a muddle my floats!
9 Answers 9
I’d make both the input and label elements display: block , and then split the name label & input, and the email label & input into div’s and float them next to each other.
Probably a bit late but this worked for me. i simply used column flex-direction on the label and input elements HTML
You could try something like
and then css it like
I know this is an old one with an accepted answer, and that answer works great.. IF you are not styling the background and floating the final inputs left. If you are, then the form background will not include the floated input fields.
To avoid this make the divs with the smaller input fields inline-block rather than float left.
I’d prefer not to use an HTML5 only element such as <section> . Also grouping the input fields might painful if you try to generate the form with code. It’s always better to produce similar markup for each one and only change the class names. Therefore I would recommend a solution that looks like this :
There is no need to add any extra div wrapper as others suggest.
The simplest way is to wrap your input element inside a related label tag and set input style to display:block .
Bonus point earned: now you don’t need to set the labels for attribute. Because every label target the nested input.
How to Align Labels Next to Inputs
When you create a web form, you’ll probably need to know how to align labels with inputs. Here, we’ll show how it’s possible to create right-aligned and left-aligned <label> elements next to inputs.
Solutions with CSS properties
In our example below, we use three <div> elements and place <label> and <input> elements within each of them. Note that we use a type attribute for each <input>. We specify the margin-bottom of our <div> element. Then, we set the display of the <label> element to «inline-block» and give a fixed width. After that, set the text-align property to «right», and the labels will be aligned with the inputs on the right side.
Example of right aligning labels next to inputs with the text-align property:
Result
We can remove the text-align property, and the labels will be left-aligned by default. Let’s see an example, where we also add placeholder , id and name attributes on inputs and for attribute on labels. As a result, the input will be activated when a label is clicked.
Example of left aligning labels next to inputs:
In our next example too, we’ll left-align the labels. Here, we also make the <label> inline-block and give a fixed width. For the <input> element, we add padding.