I have this html snippet:
<form class="job-manager-form" enctype="multipart/form-data">
<fieldset>
<label>Have an account?</label>
<div class="field account-sign-in">
<a class="button" href="">Sign in</a>
</div>
</fieldset>
<!-- Job Information Fields -->
<fieldset class="fieldset-job_title">
<label for="job_title">Job Title</label>
<div class="field required-field">
<input type="text" class="input-text" required="">
</div>
</fieldset>
<fieldset class="fieldset-job_location">
<label for="job_location">Location <small>(optional)</small></label>
<div class="field ">
<input type="text" class="input-text" name="job_location" id="job_location" placeholder="e.g. "London"" value="" maxlength="">
<small class="description">Leave this blank if the location is not important</small> </div>
</fieldset>
<fieldset class="fieldset-application">
<label for="application">Application email/URL</label>
<div class="field required-field">
<input type="text" class="input-text" name="application" id="application" placeholder="Enter an email address or website URL" value="" maxlength="" required="">
</div>
</fieldset>
</form>
And I would like to select first fieldset in the form. This what I am doing:
form.job-manager-form:first-child {
background-color: red;
}
But it selects all fieldset elements. How does :first-child works?
JSFiddle is here.
You need to target the element you want and then say it's the first-child.
There is an excellent article explaining how these selectors works:
useful-nth-child-recipies
fieldset:first-child {
background-color: red;
}
<form class="job-manager-form" enctype="multipart/form-data">
<fieldset>
<label>Have an account?</label>
<div class="field account-sign-in">
<a class="button" href="">Sign in</a>
</div>
</fieldset>
<!-- Job Information Fields -->
<fieldset class="fieldset-job_title">
<label for="job_title">Job Title</label>
<div class="field required-field">
<input type="text" class="input-text" required="">
</div>
</fieldset>
<fieldset class="fieldset-job_location">
<label for="job_location">Location <small>(optional)</small></label>
<div class="field ">
<input type="text" class="input-text" name="job_location" id="job_location" placeholder="e.g. "London"" value="" maxlength="">
<small class="description">Leave this blank if the location is not important</small> </div>
</fieldset>
<fieldset class="fieldset-application">
<label for="application">Application email/URL</label>
<div class="field required-field">
<input type="text" class="input-text" name="application" id="application" placeholder="Enter an email address or website URL" value="" maxlength="" required="">
</div>
</fieldset>
</form>
fieldset:first-child {
background-color: red;
}
This will work. However, your first-child fieldset is set to display:none; so it will not actually show the background color.
It selects an element if it is the first child of its parent.
Your selector doesn't select any fieldsets. It selects the form.
The fieldsets have a (default) transparent background, so you can see the red through them.
To select the fieldset that is the first child of a form you would need:
form.job-manager-form > fieldset:first-child
Related
I have this html which i want to target with css. The problem is that i can't find the right css selector.
The problem is that . entry-content doesn't work. Neither does.event-manager-form. The form itself is a Wordpress event manager form and want to style in with, amongst others,, border-radius
<div class="entry-content">
<form action="/post-an-event/" method="post" id="submit-event-form" class="event-manager-form" enctype="multipart/form-data">
<fieldset>
<label>Your account</label>
<div class="field
account-sign-in">
You are currently signed in as <strong>Bla bla</strong>. <a c class="button" href="...">Sign out</a>.
</div>
</fieldset>
<!-- Event
Information Fields -->
<h2 class="section-title">Event Details</h2>
<fieldset class="fieldset-event_title">
<label for="event_title">Event Title<span class="require-field">*.
</span></label>
<div class="field required-field">
<input type="text" class="input-text event_title" name="event_title" id="event_title" placeholder="Event title" attribute="" value="" maxlength="" required />
</div>
</fieldset>
<fieldset class="fieldset- event_online">
<label for="event_online">Online Event<span class="require-
field">*</span></label>
<div class="field
required-field">
<label><input
type="radio" name="event_online" id="event_online"
attribute="" value="yes" /> Yes</label>
<label><input
type="radio" name="event_online" id="event_online"
attribute="" value="no" /> No</label>
I have an form that I want to have a user fill in. I want to lay it out that the name fields are next to each other and all other fields are on their own separate line.
I have used the below code, have tried putting paragraphs and "brs" , but still no luck...
The code below:
<div style="float:left;">
<label for="username"><b>First Name*</b><span class="required"></span> </label>
<input id="user_first_name" name="FirstName" size="30" type="text" placeholder="First" />
</div>
<div style="float:right;">
<label for="name"><b>Last Name*</b><span class="required"></span></label>
<input id="user_last_name" name="LastName" size="30" type="text" placeholder="Last"/>
</div>
<!--<label><b>Full Name </b><span class="required">*</span></label><input type="text" name="FirstName" class="field-divided" placeholder="First" style="float:left" />;<input type="text" name="Surname" class="field-divided" placeholder="Last" style="float:right"/> <p></p>-->
<label><b>Email </b><span class="required">*</span></label><input type="email" name="Email" class="field-long" placeholder="Email" value="<?php echo $_POST['Turnover']; ?>" />
<label><b>Phone </b><span class="required">*</span></label><input type="number" name="Phone" class="field-divided" placeholder="Number" />
<label style="font-size:10px">only numbers, no special characters</label>
Returns the below image:
So, for some reason the Email Address Label is very much out of place (it should be above the input that is reading 1500 - the way Phone is above number
I'm sure that it's a silly little thing, but I just can't place it
I have tried various combinations of "< p>" and "< br >",but to no avail.
You need to add "clear both" ( <div style="clear:both"></div> ) to prevent the content below mixed up with your 2 floating divs.
Example code:
<div style="float:left;">
<!-- something here -->
</div>
<div style="float:right;">
<!-- something here -->
</div>
<div style="clear:both"></div>
<!-- more goes here -->
I would use something like Bootstrap, if I were you. However, here's a custom solution:
input {
width: 100%;
display: block;
}
div.inline {
width: 100%;
display: table;
}
div.inline div {
display: table-cell;
}
div.inline div:nth-child(n+2) {
padding-left: 10px;
}
<div class="inline">
<div>
<label>First Name:</label>
<input>
</div>
<div>
<label>Last Name:</label>
<input>
</div>
</div>
<div>
<label>Email:</label>
<input>
</div>
<div>
<label>Phone:</label>
<input>
</div>
wrap your bottom 3 inputs and labels in a div and add 100% width to each input and label
<div style="width:100%;clear:both;display:block;">
<label style="width:100%;display:block;"></label
<input style="width:100%;display:block;">
</div>
.flexi{
display:flex;
flex-flow:row;
}
<div class="flexi">
<div>
<label for="username"><b>First Name*</b><span class="required"></span> </label>
<input id="user_first_name" name="FirstName" size="30" type="text" placeholder="First" />
</div>
<div>
<label for="name"><b>Last Name*</b><span class="required"></span></label>
<input id="user_last_name" name="LastName" size="30" type="text" placeholder="Last"/>
</div>
</div>
<div>
<!--<label><b>Full Name </b><span class="required">*</span></label><input type="text" name="FirstName" class="field-divided" placeholder="First" style="float:left" />;<input type="text" name="Surname" class="field-divided" placeholder="Last" style="float:right"/> <p></p>-->
<div>
<label><b>Email </b><span class="required">*</span></label><input type="email" name="Email" class="field-long" placeholder="Email" value="<?php echo $_POST['Turnover']; ?>" />
</div>
<div>
<label><b>Phone </b><span class="required">*</span></label><input type="number" name="Phone" class="field-divided" placeholder="Number" />
<label style="font-size:10px">only numbers, no special characters</label>
</div>
</div>
Read about css and html on internet .
Floating causes parent to remove height. thats why yo email pops in mill
https://jsfiddle.net/d69Lxmst/3/
I'm getting errors when trying to validate this page in HTML5:
Unclosed element fieldset.
Stray end tag fieldset.
Unclosed element form.
For this block of html:
<form class="pure-form pure-form-aligned" id="submit_form_contact" novalidate>
<fieldset>
<div class="pure-control-group">
<label for="name">Your Name:</label>
<input id="name" type="text" placeholder="Name" name="name" required>
</div>
<div class="pure-control-group">
<label for="email">Your Email:</label>
<input id="email" type="email" placeholder="Email Address" name="email" required>
</div>
<div class="pure-control-group">
<label for="email_text">Inquiry Type: </label>
<select id="inquiry_dropdown" class="pure-input-1-2" name="inquiry">
<option>General</option>
<option>Sales & Marketing</option>
<option>Press & Editorial</option>
</select>
</div>
<div class="pure-control-group">
<label for="message" style="vertical-align: top;">Message:</label>
<textarea id="message" type="text" placeholder="Enter message here..." name="message"></textarea>
</div>
<div id="errors" style="text-align: center; color: red;"></div>
<button id="contact_submit" class="pure-button pure-button-primary" style="background-color: #003A70; float:right; margin-right: 35px;margin-top:15px;">Submit</button>
</div>
</fieldset>
</form>
... I can't figure out why. Everything seems to be closed properly. Can anyone spot anything I'm doing wrong?
You have an </div> after your "contact_submit" button, but no corresponding <div>. This is causing the parser the ham up.
I would suggest a code editor such as Notepad++ - one of its features is tag matching, where it can tell you easily if you have mismatched tags.
I would like to produce the following form style:
Name Email
[.................] [.................]
Subject
[.................]
Message
[.........................................]
[.........................................]
[.........................................]
[.........................................]
The HTML code I have is:
<form name="message" method="post">
<section>
<label for="name">Name</label>
<input id="name" type="text" value="" name="name">
<label for="email">Email</label>
<input id="email" type="text" value="" name="email">
</section>
<section>
<label for="subject">Subject</label>
<input id="subject" type="text" value="" name="subject">
<label for="message">Message</label>
<input id="message" type="text" value="" name="message">
</section>
</form>
At the moment it is producing:
Name [...................]
Email [...................]
Subject [...................]
Message
[.........................................]
[.........................................]
[.........................................]
[.........................................]
What would be the best way to do this? I keep getting in a muddle my floats!
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.
input, label {
display:block;
}
<form name="message" method="post">
<section>
<div style="float:left;margin-right:20px;">
<label for="name">Name</label>
<input id="name" type="text" value="" name="name">
</div>
<div style="float:left;">
<label for="email">Email</label>
<input id="email" type="text" value="" name="email">
</div>
<br style="clear:both;" />
</section>
<section>
<label for="subject">Subject</label>
<input id="subject" type="text" value="" name="subject">
<label for="message">Message</label>
<input id="message" type="text" value="" name="message">
</section>
</form>
Probably a bit late but this worked for me.
i simply used column flex-direction on the label and input elements
HTML
<form id="survey-form">
<label for="name">Name</label>
<input type="text" id="name">
<label>Email</label>
<input type="email" id="email">
</form>
CSS
label,input{
display:flex;
flex-direction:column;
}
You could try something like
<form name="message" method="post">
<section>
<div>
<label for="name">Name</label>
<input id="name" type="text" value="" name="name">
</div>
<div>
<label for="email">Email</label>
<input id="email" type="text" value="" name="email">
</div>
</section>
<section>
<div>
<label for="subject">Subject</label>
<input id="subject" type="text" value="" name="subject">
</div>
<div class="full">
<label for="message">Message</label>
<input id="message" type="text" value="" name="message">
</div>
</section>
</form>
and then css it like
form { width: 400px; }
form section div { float: left; }
form section div.full { clear: both; }
form section div label { display: block; }
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.
This:
<div style="display:inline-block;margin-right:20px;">
<label for="name">Name</label>
<input id="name" type="text" value="" name="name">
</div>
Rather than:
<div style="float:left;margin-right:20px;">
<label for="name">Name</label>
<input id="name" type="text" value="" name="name">
</div>
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 :
CSS
label, input {
display: block;
}
ul.form {
width : 500px;
padding: 0px;
margin : 0px;
list-style-type: none;
}
ul.form li {
width : 500px;
}
ul.form li input {
width : 200px;
}
ul.form li textarea {
width : 450px;
height: 150px;
}
ul.form li.twoColumnPart {
float : left;
width : 250px;
}
HTML
<form name="message" method="post">
<ul class="form">
<li class="twoColumnPart">
<label for="name">Name</label>
<input id="name" type="text" value="" name="name">
</li>
<li class="twoColumnPart">
<label for="email">Email</label>
<input id="email" type="text" value="" name="email">
</li>
<li>
<label for="subject">Subject</label>
<input id="subject" type="text" value="" name="subject">
</li>
<li>
<label for="message">Message</label>
<textarea id="message" type="text" name="message"></textarea>
</li>
</ul>
</form>
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.
<form name="message" method="post">
<section>
<label class="left">
Name
<input id="name" type="text" name="name">
</label>
<label class="right">
Email
<input id="email" type="text" name="email">
</label>
</section>
</form>
https://jsfiddle.net/Tomanek1/sguh5k17/15/
Using flex-direction: column; on the label elements will place the labels above their boxes, however it will also lock all the boxes in a long column. To get more than one box per line, with the label above the boxes you must pair them with divs. Here is an example of both:
#survey-form1 label {
display:flex;
flex-direction:column;
}
#survey-form2 {
display: flex;
flex-direction: row;
}
.inputPair {
display: flex;
flex-direction: column;
margin-right: 10px
}
<form id="survey-form1">
<label for="name1">Name</label>
<input type="text" id="name1">
<label for="email1">Email</label>
<input type="email" id="email">
</form>
<form id="survey-form2">
<div class="inputPair">
<label for="name2">Name2</label>
<input type="text" id="name2">
</div>
<div class="inputPair">
<label for="email2">Email2</label>
<input type="email" id="email2">
</div>
</form>
10 minutes ago i had the same problem of place label above input
then i got a small ugly resolution
<form>
<h4><label for="male">Male</label></h4>
<input type="radio" name="sex" id="male" value="male">
</form>
The disadvantage is that there is a big blank space between the label and input, of course you can adjust the css
Demo at:
http://jsfiddle.net/bqkawjs5/
OR....you can use flexbox with flex-direction: column on the imputs and they will arrange like bliss.
I have a html form that is basically vertical but i really have no idea how to make two text fields on the same line. For example the following form below i want the First and Last name on the same line rather then one below the other.
<form action="/users" method="post"><div style="margin:0;padding:0">
<div>
<label for="username">First Name</label>
<input id="user_first_name" name="user[first_name]" size="30" type="text" />
</div>
<div>
<label for="name">Last Name</label>
<input id="user_last_name" name="user[last_name]" size="30" type="text" />
</div>
<div>
<label for="email">Email</label>
<input id="user_email" name="user[email]" size="30" type="text" />
</div>
<div>
<label for="pass1">Password</label>
<input id="user_password" name="user[password]" size="30" type="password" />
</div>
<div>
<label for="pass2">Confirm Password</label>
<input id="user_password_confirmation" name="user[password_confirmation]" size="30" type="password" />
</div>
Put style="float:left" on each of your divs:
<div style="float:left;">...........
Example:
<div style="float:left;">
<label for="username">First Name</label>
<input id="user_first_name" name="user[first_name]" size="30" type="text" />
</div>
<div style="float:left;">
<label for="name">Last Name</label>
<input id="user_last_name" name="user[last_name]" size="30" type="text" />
</div>
To put an element on new line, put this div below it:
<div style="clear:both;"> </div>
Of course, you can also create classes in the CSS file:
.left{
float:left;
}
.clear{
clear:both;
}
And then your html should look like this:
<div class="left">
<label for="username">First Name</label>
<input id="user_first_name" name="user[first_name]" size="30" type="text" />
</div>
<div class="left">
<label for="name">Last Name</label>
<input id="user_last_name" name="user[last_name]" size="30" type="text" />
</div>
To put an element on new line, put this div below it:
<div class="clear"> </div>
More Info:
CSS Float Clear Tutorial
The default display style for a div is "block." This means that each new div will be under the prior one.
You can:
Override the flow style by using float as #Sarfraz suggests.
or
Change your html to use something other than divs for elements you want on the same line. I suggest that you just leave out the divs for the "last_name" field
<form action="/users" method="post"><div style="margin:0;padding:0">
<div>
<label for="username">First Name</label>
<input id="user_first_name" name="user[first_name]" size="30" type="text" />
<label for="name">Last Name</label>
<input id="user_last_name" name="user[last_name]" size="30" type="text" />
</div>
... rest is same
For the sake of bandwidth saving, we shouldn't include <div> for each of <label> and <input> pair
This solution may serve you better and may increase readability
<div class="form">
<label for="product_name">Name</label>
<input id="product_name" name="product[name]" size="30" type="text" value="4">
<label for="product_stock">Stock</label>
<input id="product_stock" name="product[stock]" size="30" type="text" value="-1">
<label for="price_amount">Amount</label>
<input id="price_amount" name="price[amount]" size="30" type="text" value="6.0">
</div>
The css for above form would be
.form > label
{
float: left;
clear: right;
}
.form > input
{
float: right;
}
I believe the output would be as following:
I would go with Larry K's solution, but you can also set the display to inline-block if you want the benefits of both block and inline elements.
You can do this in the div tag by inserting:
style="display:inline-block;"
Or in a CSS stylesheet with this method:
div { display:inline-block; }
Hope it helps, but as earlier mentioned, I would personally go for Larry K's solution ;-)
You should put the input for the last name into the same div where you have the first name.
<div>
<label for="username">First Name</label>
<input id="user_first_name" name="user[first_name]" size="30" type="text" />
<input id="user_last_name" name="user[last_name]" size="30" type="text" />
</div>
Then, in your CSS give your #user_first_name and #user_last_name height and float them both to the left. For example:
#user_first_name{
max-width:100px; /*max-width for responsiveness*/
float:left;
}
#user_lastname_name{
max-width:100px;
float:left;
}
You could use the {display: inline-flex;}
this would produce this:
inline-flex