I'm trying to customize the style of the login form, but I can't apply the :focus rule. Could someone be so kind as to explain to me why it's not working? I don't understand what I'm doing wrong, sorry, but I'm new to all this.
/*Label Style*/
.login_form_fields input:focus + label {
color: blue;
}
/*Input Style*/
.login_form_fields input {
border-radius: 2px;
background: #fff;
border: 1px solid #E3E3E3;
}
.login_form_fields input:focus {
border: 1px solid blue;
}
<form id="login-form" method="post">
<div class="login_form_fields uname">
<label for="username">Username o Email:</label>
<input type="text" id="username" name="username" required>
</div>
<div class="login_form_fields pswrd">
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
</div>
<button class="login_button" type="submit">Accedi</button>
</form>
</div>
I have this css search form on the left top, above the flags. Please see this LINK
<form action="https://neculaifantanaru.com/search.html" method="get" id="site-search">
<fieldset>
<!-- <label for="search">Cauta in site</label> -->
<input type="text" name="q" id="q" value="" />
<button type="submit" class="btn btn-inverse">cauta</button>
</fieldset>
</form>
I made this css:
#site-search {float:right;width:240px;margin:0;padding:0px 0px 0px 0px;font-size:11px;background:#white;}
#site-search LABEL {display:inline-block;font-size:11px;color:#red;}
#site-search INPUT {width:140px;height:22px;margin:90;padding:0px 9px 0px;border-color:#yellow;background:#blueviolet;font-size:11px;}
#site-search BUTTON {width:45px;height:22px;padding:0;margin:90;font-size:11px;line-height:13px;}
I want to change the css above, in order to look like this. LINK 2 So, what should I change on my css for this?
Remove the styles and try with these styles. May be helpful :)
<form action="https://neculaifantanaru.com/search.html" method="get" id="site-search">
<fieldset>
<!-- <label for="search">Cauta in site</label> -->
<input type="text" name="q" id="q" value="" />
<button type="submit" class="btn btn-inverse">cauta</button>
</fieldset>
</form>
<style>
fieldset{ border: none;}
input { background-color: #ffff82; border: 1px solid #cccccc; }
button { background-color: #fff; color: blue; font-weight: bold; font-family: sans-sarif; border: none; border-top: 1px solid #0d6295; border-right: 1px solid #0d6295; font-size: 15px; }
</style>
As said in title, the CSS is connected to the page it is on properly. And the styling works in all aspects except for one single form. Below is some CSS for the form followed by the HTML code for the form.
#form2 input {
background: black;
padding: 0px;
border: 1px solid black;
border-radius: 20px;
}
#form2 select {
border: 1px solid black;
border-radius: 20px;
}
<form id="form2" method="post" action="home.php?id=<?php echo $user_id;?>">
</br>
<h2>What would you like to ask? Rant away!</h2>
<input type="text" name="title" placeholder="Write a title" size="92px" />
<textarea cols="70" rows="6" name="content" ;>Description...</textarea><br/>
<select name="topic">
<option> Select Topic</option>
<?php getTopics() ;?>
</select>
<input type="submit" name="sub" value="Post to Timeline" />
</form>
I am trying to float a label on top of the input but it's not working correctly? Maybe I messed up the CSS? Help would be greatly appreciated, thanks!
Heres what it looks like at the moment:
http://prntscr.com/37hw30
HTML:
<form id="loginformitem" name="loginformitem" method="post" style="float:right">
<label for="username">Username</label>
<input type="text" name="log_username" class="logintext" id="username" placeholder="Username" style="margin-left:100px">
<label for="password">Password</label>
<input type="password" name="log_password" class="logintext" id="password" placeholder="Password">
<button type="submit" class="loginbutton" name="login" >Login now</button>
</form>
CSS:
.logintext {
margin-right: 10px;
border: 2px solid rgba(0,0,0,0);
border-radius: 2px;
padding: 2px 2px 3px 2px;
font-size: 13px;
color: #222;
}
form label {
font-size: 13px;
font-weight: bold;
color: #a4c0d7;
}
you can wrap label & input into a <p> or a <span> displayed as inline-block.
input can be displayed as block to break the line.
HTML
<form id="loginformitem" name="loginformitem" method="post" >
<span>
<label for="username">Username</label>
<input type="text" name="log_username" class="logintext" id="username" placeholder="Username" >
</span>
<span>
<label for="password">Password</label>
<input type="password" name="log_password" class="logintext" id="password" placeholder="Password">
</span>
<button type="submit" class="loginbutton" name="login" >Login now</button>
</form>
CSS
form span {
display:inline-block;
margin:0 50px;
vertical-align:bottom;
}
span input {
display:block;/* if you want submit under , do form input {} to include it too */
}
form {
float:right;
/* for the demo */
border:solid;
border-radius:1em;
padding:0.25em;
}
Turns to look like DEMO
try this
#loginformitem input , #loginformitem label {
clear : left ,
float : left
}
I am trying to place two input forms next to eachother and position some text underneath them. Somehow it never ends up aligned correctly. This picture shows what I am trying to do:
HTML:
<form action="#" class="cleanForm" method="POST">
<fieldset>
<input type="text" name="firstname" placeholder="first name" required>
<em>Please enter your first name</em>
<input type="text" name="lastname" placeholder="last name" required>
<em>Enter your last name</em>
<input type="email" name="email" placeholder="e-mail" required>
<em>Enter your e-mail address</em>
<input type="email" name="email2" placeholder="re-enter e-mail" required>
<em>Re-enter your e-mail address</em>
<input type="password" name="password" placeholder="password" required>
<em>Enter a password between 8 and 20 digits</em>
<input type="password" name="password2" placeholder="re-enter password" required />
<em>Re-enter the password</em>
<p>
<input type="radio" name="gender" value="Female" checked>
<label for="female">Female</label>
<input type="radio" name="gender" value="Male">
<label for="male">Male</label>
</p>
<p>
<input type="checkbox" id="agree-TOS">
<label for="agree-TOS">I have read and agree to the Terms of Service.</label>
</p>
<input type="submit" value="Create account">
</fieldset>
</form>
CSS:
form.cleanForm {
width:700px;
margin:0 auto;
}
form.cleanForm p {
margin-bottom:15px;
}
input[type="email"], input[type="password"], input[type="text"] {
font-family: Arial, Sans-Serif;
font-size: 18px;
color: #adadad;
padding: 10px;
outline:none;
float:left;
border: solid 1px #adadad;
width: 230px;
transition: all 2s ease-in-out;
-webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
-moz-box-shadow:inset 0 0 5px 5px #E6E6E6;
-webkit-box-shadow:inset 0 0 5px 5px #E6E6E6;
box-shadow:inset 0 0 5px 5px #E6E6E6;
clear: right;
}
input[type="email"]:focus, input[type="email"]:hover, input[type="password"]:focus,
input[type="password"]:hover, input[type="text"]:focus, input[type="text"]:hover {
border:1px solid #FF003F;
}
form.cleanForm em {
font-size:12px;
}
You're applying float:left to the <input>s, but not to the <em>s. That's why all the fields are pushed to the left, while the labels remain in the ordinary page flow.
One possible solution is wrapping both of them in a <div> and applying the float to that:
HTML:
<div class="field">
<input type="text" name="firstname" placeholder="first name" required />
<em>Please enter your first name</em>
</di>
CSS:
div.field {
float: left;
}
Also, it would be more sematically correct to use a <label> instead of an <em>.
I think your markup needs a redo. Use <label>s to describe form element labels, not <em>s. There's no semantic value in the emphasis. Also, you can use the labels themselves to align the form easily. Here's my code (Live Example Here):
HTML
<form action="#" class="cleanForm" method="POST">
<fieldset>
<label><input type="text" name="firstname" placeholder="first name" required>
Please enter your first name</label>
<label><input type="text" name="lastname" placeholder="last name" required>
Enter your last name</label>
<label><input type="email" name="email" placeholder="e-mail" required>
Enter your e-mail address</label>
<label><input type="email" name="email2" placeholder="re-enter e-mail" required>
Re-enter your e-mail address</label>
<label><input type="password" name="password" placeholder="password" required>
Enter a password between 8 and 20 digits</label>
<label><input type="password" name="password2" placeholder="re-enter password" required>
Re-enter the password</label>
<div id="gender">
<label><input type="radio" name="gender" value="Female" checked>
Female</label>
<label><input type="radio" name="gender" value="Male">
Male</label>
</div>
<label class="tos"><input type="checkbox" id="agree-TOS">
I have read and agree to the Terms of Service.</label>
</fieldset>
<button type="submit">Create account</button>
</form>
CSS
.cleanForm {
width: 550px;
}
fieldset > label > input {
display: block;
}
input[type="checkbox"] {
display: inline;
}
label {
margin: 10px;
padding: 5px;
}
fieldset > label {
float: left;
width: 200px;
}
label:nth-child(2n+1) {
clear: both;
}
#gender, .tos, button {
clear: both;
}
.tos {
width: 400px;
}
input[type="text"], input[type="email"], input[type="password"] {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.2);
-moz-box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.2);
box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.2);
padding: 5px;
}
You may try this:
HTML
<form action="#" class="cleanForm" method="POST">
<fieldset>
<div class="column">
<input type="text" name="firstname" placeholder="first name" required />
<em>Please enter your first name</em>
</div>
<div class="column last">
<input type="text" name="lastname" placeholder="last name" required />
<em>Enter your last name</em>
</div>
<div class="column">
<input type="email" name="email" placeholder="e-mail" required />
<em>Enter your e-mail address</em>
</div>
<div class="column last">
<input type="email" name="email2" placeholder="re-enter e-mail" required />
<em>Re-enter your e-mail address</em>
</div>
<div class="column">
<input type="password" name="password" placeholder="password" required />
<em>Enter a password between 8 and 20 digits</em>
</div>
<div class="column last">
<input type="password" name="password2" placeholder="re-enter password" required /><br />
<em>Re-enter the password</em>
</div>
<p style="clear:both;">
<input type="radio" name="gender" value="Female" checked />
<label for="female">Female</label>
<input type="radio" name="gender" value="Male" />
<label for="male">Male</label>
</p>
<p>
<input type="checkbox" id="agree-TOS" />
<label for="agree-TOS">I have read and agree to the Terms of Service.</label>
</p>
<input type="submit" value="Create account" />
</fieldset>
</form>
CSS
form.cleanForm {
width:700px;
margin:0 auto;
}
form.cleanForm p {
margin-bottom:15px;
}
input[type="email"], input[type="password"], input[type="text"] {
font-family: Arial, Sans-Serif;
font-size: 18px;
color: #adadad;
padding: 10px;
outline:none;
float:left;
border: solid 1px #adadad;
width: 230px;
transition: all 2s ease-in-out;
-webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
-moz-box-shadow:inset 0 0 5px 5px #E6E6E6;
-webkit-box-shadow:inset 0 0 5px 5px #E6E6E6;
box-shadow:inset 0 0 5px 5px #E6E6E6;
clear: right;
}
input[type="email"]:focus, input[type="email"]:hover, input[type="password"]:focus, input[type="password"]:hover, input[type="text"]:focus, input[type="text"]:hover {
border:1px solid #FF003F;
}
form.cleanForm em {
font-size:12px;
}
.column{
width:250px;
float:left;
margin-right:20px;
padding: 10px;
}
.last{
margin:0;
padding: 10px;
}
Output
#PPvG's answer is very close, but not perfect:
In almost all cases, every <input> tag should have a matching <label> tag, and where you have used <em> is a perfect place for a label.
In this case, inline-block is more appropriate than float
Here's how I would do it:
HTML:
<div class="field">
<input type="text" name="firstname" id="firstname_field" placeholder="first name" required />
<label for="firstname_field">Please enter your first name</label>
</div>
CSS:
div.field {
display: inline-block;
width: 200px;
}
div.field label
{
display: block;
}