I have this form:
<div class="jumbotron" id="jumbotron-6" align="center">
<form action="login.php" method="POST">
<input type="text" placeholder="Enter your email" name="email">
<input type="password" placeholder="and password" name="password">
<input type="submit">
</form>
</div>
And I am trying to apply this CSS to it:
input [type="text"], input [type="password"] {
outline: none;
padding: 10px;
display: block;
width: 300px;
border-radius: 3px;
border:1px solid #eee;
margin:20px auto;
}
But it is not applying. I have my css linked up to the page too.
Remove the spacing so it would be input[....]
input[type="text"], input[type="password"] {
outline: none;
padding: 10px;
display: block;
width: 300px;
border-radius: 3px;
border:1px solid #eee;
margin:20px auto;
}
<div class="jumbotron" id="jumbotron-6" align="center">
<form action="login.php" method="POST">
<input type="text" placeholder="Enter your email" name="email">
<input type="password" placeholder="and password" name="password">
<input type="submit">
</form>
</div>
input [type="text"], input [type="password"] {
That would select elements inside an input element (impossible in HTML) that have a type of text or password - you need to remove the spaces, to select input elements that themsleves are of type text or password:
input[type="text"], input[type="password"] {
Related
I want this form fields just like the red line in this picture https://i.stack.imgur.com/gbvDs.png
input,
select,
textarea {
width: 20%;
padding: 12px;
border: 1px solid #ccc;
box-sizing: border-box;
margin-left: 20px;
}
label {
padding: 12px 12px 12px 0;
display: inline-block;
}
.container {
/* the form is inside this container */
padding: 20px;
margin: 20px;
overflow: auto;
text-align: center;
}
<div class="container">
<form method="post" enctype="multipart/form-data" id="form">
<label for="id_image1">profile picture</label>
<input type="file" name="image1" accept="image/*" required id="id_image1" />
<label for="id_image2">cover picture</label>
<input type="file" name="image2" accept="image/*" required id="id_image2" />
<label for="id_tag">Name:</label> <input type="text" name="tag" maxlength="50" required id="id_tag" />
<button type="submit" class="button">Upload</button>
</form>
</div>
You can accomplish this with CSS Grid and a little padding.
.wrap,
.field-container {
display: inline-grid;
}
.field-container {
grid-template-columns: 1fr auto;
padding-bottom: 0.5rem;
}
.field-container label {
padding-right: 2rem;
text-align: right;
}
<div class="wrap">
<div class="field-container">
<label for="profilePic">Profile picture</label>
<input type="text" id="profilePic">
</div>
<div class="field-container">
<label for="coverPic">Cover picture</label>
<input type="text" id="coverPic">
</div>
<div class="field-container">
<label for="name">Name</label>
<input type="text" id="name">
</div>
</div>
jsFiddle
I changed your code this way, please check if it is suits what you desire:
<div class="container">
<form method="post" enctype="multipart/form-data" id="form">
<div class="rows">
<div class="column">
<label for="id_image1">profile picture</label>
<input type="file" name="image1" accept="image/*" required id="id_image1" />
</div>
<div class="column">
<label for="id_image2">cover picture</label>
<input type="file" name="image2" accept="image/*" required id="id_image2" />
</div>
<div class="column">
<label for="id_tag">Name:</label> <input type="text" name="tag" maxlength="50" required id="id_tag" />
<button type="submit" class="button">Upload</button>
</div>
</div>
</form>
</div>
<style>
input,
select,
textarea {
width: 55%;
padding: 12px;
border: 1px solid #ccc;
box-sizing: border-box;
margin-left: 20px;
}
label {
width:30%;
float:left;
}
#form{
width:100%;
}
.container {
width:40%;
margin:auto;
}
.rows{
width:100%;
display:block;
}
.column{
width:100%;
display:inline-block;
}
</style>
I have the following form:
body {
background: #fff;
color: 404040
}
form {
display: block;
position: relative;
width: 80%;
background: #f9f9f9;
margin: 10px auto;
padding: 30px;
}
label {
display: block;
position: relative;
top: -20px;
left: 0px;
color: #999;
font-family: 'Helvetica', sans-serif;
font-size: 16px;
z-index: 1;
transition: all 0.3s ease-out;
}
input,
input:optional {
display: block;
position: relative;
background: none;
border: none;
border-bottom: 1px solid #ddd;
width: 100%;
font-family: 'Helvetica', sans-serif;
font-weight: bold;
font-size: 16px;
z-index: 2;
}
input:focus,
input:valid {
outline: none;
border-bottom: 1px solid #00aced;
}
input:focus+label,
input:required:valid+label {
top: -40px;
font-size: 11px;
color: #00aced;
}
.divider {
position: relative;
height: 30px;
width: auto;
background: none;
}
#hex1 {
width: 75px;
margin: 10px auto;
}
.headline {
margin-left: 100px;
font-size: 24px;
}
.submitBtn {
width: 250px;
height: 75px;
border-radius: 3px;
background: #37afac;
margin: 0 auto;
color: #fff
}
#title {
margin-top: -60px;
margin-left: 80px;
margin-bottom: 20px;
}
<form>
<h3>Details about the person you are reporting:</h3>
<div class='divider'></div>
<input type="text" name="firstname" required autocomplete="off" />
<label for="firstname">First Name</label>
<div class='divider'></div>
<input type="text" name="lastname" required autocomplete="off" />
<label for="lastname">Last Name</label>
<div class='divider'></div>
<input type="text" name="age" class="test" autocomplete="off" />
<label for="age">Age</label>
<div class='divider'></div>
<input type="text" name="gender" required autocomplete="off" />
<label for="gender">Gender</label>
<div class='divider'></div>
<input type="text" name="address 1" autocomplete="off" />
<label for="address1">Address 1</label>
<div class='divider'></div>
<input type="text" name="address 2" autocomplete="off" />
<label for="address2">Address 2</label>
<div class='divider'></div>
<input type="text" name="city" required autocomplete="off" />
<label for="city">City</label>
<div class='divider'></div>
<input type="text" name="state" required autocomplete="off" />
<label for="state">State</label>
<div class='divider'></div>
<input type="text" name="position" autocomplete="off" />
<label for="Position">Position (coach, referee, etc)</label>
<div class='divider'></div>
<input type="text" name="program" required autocomplete="off" />
<label for="Program">Program where individual works</label>
<div class='divider'></div>
<input type="text" name="IncidentDescription" required autocomplete="off" />
<label for="IncidentDescription">Incident description</label>
<div class='divider'></div>
<input type="text" name="IncidentLocation" required autocomplete="off" />
<label for="IncidentLocation">Incident location</label>
<div class='divider'></div>
Codepen: https://codepen.io/anon/pen/PazrBw
As each input receives focus, it animates via receiving a class in css. Using basic html5 validation, it's supposed to retain that class to show that it's been properly filled out.
My problem is that I need some fields to be not required. When fields are not marked required, the form automatically applies some of the :valid pseudoclass (the blue underline). The even bigger issue is that when it loses focus, it loses that class and collapses the label back down onto the input text.
What am I missing here? thank you!
You are not missing anything, it all behaves the way it's supposed to be based on your code. So you need an alternative approach.
I suggest using :placeholder-shown selector instead of :valid. This way, empty optional fields will no longer get selected.
To make this work, you first need to add placeholder=" " to your inputs. This feels a bit hacky because this way you are losing the ability to use placeholders in case you need them but remember that you are already saying no to using placeholders by putting labels in their place (well, if you ever need to include placeholders for the sake of accessibility, do it, and instead of empty placeholders put real ones, then hide them with CSS. Another topic, another time).
:placeholder-shown does not have IE/old browser support so we'll go with a good example of progressive enhancement here:
Label text will be already minimised and positioned on top of the input as a default (that is top: -40px; font-size: 11px;) so that it does not mess with user input. I believe that is good enough for IE/old browsers.
Then we add the nice animation effect for browsers that do support :placeholder-shown by including following styles:
input:not(:focus):placeholder-shown + label {
top: -20px;
font-size: 16px;
}
:not(:focus) is necessary to resize and reposition label as soon as user focuses an input because some browsers show placeholder even after focus (and hide it only after user starts typing).
body {
background: #fff;
color: 404040
}
form {
display: block;
position: relative;
width: 80%;
background: #f9f9f9;
margin: 10px auto;
padding: 30px;
}
label {
display: block;
position: relative;
/* top: -20px; */
top: -40px;
left: 0px;
color: #999;
font-family: 'Helvetica', sans-serif;
/* font-size: 16px; */
font-size: 11px;
z-index: 1;
transition: all 0.3s ease-out;
}
input/*,
input:optional */ {
display: block;
position: relative;
background: none;
border: none;
border-bottom: 1px solid #ddd;
width: 100%;
font-family: 'Helvetica', sans-serif;
font-weight: bold;
font-size: 16px;
z-index: 2;
}
input:focus/*,
input:valid*/ {
outline: none;
border-bottom: 1px solid #00aced;
}
input:focus+label/*,
input:required:valid+label*/ {
color: #00aced;
}
/* New styles >> */
input:not(:focus):placeholder-shown + label {
top: -20px;
font-size: 16px;
}
/* << */
.divider {
position: relative;
height: 30px;
width: auto;
background: none;
}
#hex1 {
width: 75px;
margin: 10px auto;
}
.headline {
margin-left: 100px;
font-size: 24px;
}
.submitBtn {
width: 250px;
height: 75px;
border-radius: 3px;
background: #37afac;
margin: 0 auto;
color: #fff
}
#title {
margin-top: -60px;
margin-left: 80px;
margin-bottom: 20px;
}
<form>
<h3>Details about the person you are reporting:</h3>
<div class='divider'></div>
<input placeholder=" " type="text" name="firstname" required autocomplete="off" />
<label for="firstname">First Name</label>
<div class='divider'></div>
<input placeholder=" " type="text" name="lastname" required autocomplete="off" />
<label for="lastname">Last Name</label>
<div class='divider'></div>
<input placeholder=" " type="text" name="age" class="test" autocomplete="off" />
<label for="age">Age</label>
<div class='divider'></div>
<input placeholder=" " type="text" name="gender" required autocomplete="off" />
<label for="gender">Gender</label>
<div class='divider'></div>
<input placeholder=" " type="text" name="address 1" autocomplete="off" />
<label for="address1">Address 1</label>
<div class='divider'></div>
<input placeholder=" " type="text" name="address 2" autocomplete="off" />
<label for="address2">Address 2</label>
<div class='divider'></div>
<input placeholder=" " type="text" name="city" required autocomplete="off" />
<label for="city">City</label>
<div class='divider'></div>
<input placeholder=" " type="text" name="state" required autocomplete="off" />
<label for="state">State</label>
<div class='divider'></div>
<input placeholder=" " type="text" name="position" autocomplete="off" />
<label for="Position">Position (coach, referee, etc)</label>
<div class='divider'></div>
<input placeholder=" " type="text" name="program" required autocomplete="off" />
<label for="Program">Program where individual works</label>
<div class='divider'></div>
<input placeholder=" " type="text" name="IncidentDescription" required autocomplete="off" />
<label for="IncidentDescription">Incident description</label>
<div class='divider'></div>
<input placeholder=" " type="text" name="IncidentLocation" required autocomplete="off" />
<label for="IncidentLocation">Incident location</label>
<div class='divider'></div>
im using twitter bootstrap 3 and trying to center login form.
Example is here http://jsfiddle.net/0y848kf8/.
form is like this
<div id="loginContainer" class="container">
<h2>Sign in</h2>
<form action="/www/sign/in" method="post" class="form-horizontal" id="frm-signInForm">
<div class="form-group"><label for="frm-signInForm-username" class=" control-label col-sm-2">Username:</label>
<div class="col-sm-5"><input type="text" name="username" id="frm-signInForm-username" required="" data-nette-rules="[{"op":":filled","msg":"Please enter your username."}]" value="" class="form-control"></div>
</div>
<div class="form-group"><label for="frm-signInForm-password" class=" control-label col-sm-2">Password:</label>
<div class="col-sm-5"><input type="password" name="password" id="frm-signInForm-password" required="" data-nette-rules="[{"op":":filled","msg":"Please enter your password."}]" class="form-control"></div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-5">
<input type="submit" name="send" id="frm-signInForm-send" value="Sign in" class="btn btn-default">
</div>
</div>
<div><input type="hidden" name="do" value="signInForm-submit"></div>
</form>
</div>
And im curious why pagination-center class not working on loginContainer and why form-groups have such big width. I thought that centering with bootstrap will be easy, but i must make some mistake.
Here is a basic use scenario to center the form using css media queries. You originally had div id="container-fluid" (you'll want class not id) which is a full-width container so you'll want div class="container" to utilize the bootstrap default css.
Let me know if this helps at all.
input[type="text"],
input[type="password"],
.form-control {
box-shadow: none;
padding: 4px 0px 0px 10px;
height: 40px;
width: 100%;
font-size: 16px;
color: #33342e;
border: 1px solid #1c1c1c;
border-radius: 1px;
line-height: 100%;
-webkit-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: none;
box-shadow: none;
-webkit-appearance: none;
appearance: none;
}
#contact-form {
padding: 15px 350px;
color: #1c1c1c;
font-size: 16px;
}
.btn-submit {
color: #fff;
background-color: #1c1c1c;
border-color: #fff;
width: 100%;
height: 45px;
font-size: 20px;
font-weight: 500;
margin: 5px 0px;
}
.btn-submit:hover {
color: #F00;
background-color: #FFF;
border: 2px solid #1c1c1c;
}
#media (max-width: 992px) {
#contact-form {
padding: 15px 50px;
}
}
#media (max-width: 480px) {
#contact-form {
padding: 15px 0px;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<form id="contact-form" name="contact-form" class="contact-form">
<fieldset>
<div class="row">
<div class="col-lg-12 form-group">
<h2>Sign In</h2>
<label for="user">Username</label>
<input class="form-control" type="text" value="" name="user" placeholder="Username" aria-required="true" />
</div>
<div class="col-lg-12 form-group">
<label for="Password">Password</label>
<input class="fom-control" type="text" value="" name="password" placeholder="Password" aria-required="true" />
</div>
<div class="col-lg-12 form-group">
<input type="submit" class="btn btn-submit" />
</div>
</div>
<!--end row-->
</fieldset>
</form>
</div>
Try this
http://jsfiddle.net/scaisEdge/bhk7n3ar/
<div id="loginContainer" class="container">
<h2 class="text-center">Sign in</h2>
and change width of the field
I can't figure out a way to align Provinces vertically beside section. I tried using height auto on label also a couple of css display but nothing would work. I just want Provinces to be vertically in the middle beside section which has provinces with option tag. Any help will be appreciated.
<label class="lselect" for="province">Province: </label>
<select name="province" size="2">
<optgroup label="Province">
<option value="alberta">Alberta</option>
<option value="bc">British Colombia</option>
<option value="manitoba">Manitoba</option>
<option value="newbrunswick">New Brunswick</option>
</optgroup>
</select>
http://jsfiddle.net/rbamwdvb/
May not be the best solution but one solution is:
.lselect{
vertical-align: 35px;
}
Sobasofy your code are fine and your css is okay all you need is to remove the size attribute for select and use css to size it back.
<label class="lselect" for="province">Province: </label>
<select name="province" style="height:40px;width:200px">
<optgroup label="Province">
<option value="alberta">Alberta</option>
<option value="bc">British Colombia</option>
<option value="manitoba">Manitoba</option>
<option value="newbrunswick">New Brunswick</option>
</optgroup>
</select>
I have done it and it work just try it yourself
Wrap the label and select elements inside two different divs and wrap them in another div. Then use display: inline-block and vertical-align to align them.
Demo on dabblet
<body>
<header>
<img src="logo.png" alt="Seneca" width="195px" height="43px">
<h1>Coop Program Application Form</h1>
<p id="validerr" class="validerr">Required fields are followed by *.</p>
</header>
<form name="senecaform" method="post" action="" onreset="alert('The form will be reset')">
<!--onsubmit='return validator(this)'-->
<p class="info">Basic Information</p>
<div>
<label for="fname">First Name:</label>
<input type="text" name="fname" size="35" autofocus="autofocus" required="required">
</br>
<label for="lname">Last Name:</label>
<input type="text" name="lname" size="35" required="required">
</br>
<label for="studid">Student ID:</label>
<input type="text" name="studid" size="35" maxlength="10" required="required">
</br>
<label for="learnid">Learn ID:</label>
<input type="text" name="learnid" size="35" required="required">
</br>
<label for="email">Student ID:</label>
<input type="text" name="email" size="35" required="required">
</br>
<label for="phonenum">Phone Number:</label>
<input type="text" name="phonenum" placeholder="(999) 999-9999" size="35" required="required">
</br>
<label for="address">Address:</label>
<input type="text" name="address" size="35" maxlength="10" required="required">
</br>
<label for="city">City:</label>
<input type="text" name="city" size="35" maxlength="10" required="required">
</br>
<div class="provinceCont">
<div class="lbl">
<label class="lselect" for="province">Province:</label>
</div>
<div class="slct">
<select name="province" size="2">
<optgroup label="Province">
<option value="alberta">Alberta</option>
<option value="bc">British Colombia</option>
<option value="manitoba">Manitoba</option>
<option value="newbrunswick">New Brunswick</option>
</optgroup>
</select>
</div>
</div>
</div>
<button type="submit">submit</button>
<button type="reset">Reset</button>
</form>
</body>
CSS:
body{
width: 580px;
margin: auto;
margin-top: 5px;
padding: 45px 10px;
border: 1px solid #CBCBCB;
border-radius: 8px;
}
h1{
margin-top: 45px;
font-size: 22px;
font-weight: bold;
text-shadow: 3px 3px 2px grey;
height: 20px;
}
.validerr{
margin: 30px 0px;
}
form{
width: 580px ;
margin: 0 auto;
}
.info{
background-color: #9A9A9A;
font-weight: bold;
padding-left: 10px;
height: 18px;
padding-top: 2px;
}
div{
margin: 0 auto;
width: 400px;
text-align: right;
}
input{
height: 1.5em;
margin-left: 10px;
margin-top: 10px;
margin-bottom: 10px;
border: 1px solid #CBCBCB;
border-radius: 4px;
box-shadow: 3px 3px 4px grey;
}
.provinceCont, select {
display: inline-block;
}
.provinceCont {
height: 40px
width: 350px;
}
.lbl {
display: inline-block;
vertical-align: middle;
width: 60px;
height: 52px;
}
.slct {
display: inline-block;
height: 30px
line-height: 30px;;
width: 260px;
}
select{
width: 250px;
margin: 10px 0px 10px 10px;
border: 1px solid #CBCBCB;
border-radius: 4px;
box-shadow: 3px 3px 4px grey;
}
This is probably the best way to get this to work. If you use set units, such as pixels, the layout will break if the website is responsive.
CSS
.lselect {
float: left;
}
index.html with a form:
<form id="mc-embedded-subscribe-form" class="validate" name="mc-embedded-subscribe-form" method="post" action="mailing.php"><pre>
<fieldset>
<div class="mc-field-group">
<div class="input-cont">
<input id="email" class="required email input-text example" type="text" name="email" value="Your email address" onfocus="value=''" style="color: rgb(178, 178, 178);">
</div>
</div>
<div class="submit-cont">
<input id="submit" class="input-submit" type="submit" name="subscribe" value="">
CSS right now:
#content form #submit {
background: url("../img/join-button.png") no-repeat left top;
border: 0 none;
color: #221505;
cursor: pointer;
float: right;
font-size: 23px;
font-weight: 800;
height: 46px;
outline: 0 none;
position: relative;
top: 1px;
width: 102px;
How in this case to specify a:hover and a:active properties and change a background images as I do not have any values in my html or is there a better way to do this? Thanks.
This should work
#content form #submit:hover {
background-image: ...
}
#content form #submit:active {
background-image: ...
}