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;
}
Related
Trying to create a basic website layout for a course (Odin Project). However I noticed that their website design has a perfect box shadow with no light gap. Where as my design no matter how much I try to mess with the box shadow property settings seems to have a small 1-2px gap between the box shadow and input fields. This is very noticeable and sort of ruins the design. I am a novice at CSS and was hoping someone more experienced could direct me to a good solution.
.form-flex-container {
display: flex;
flex-direction: column;
margin-bottom: 40px;
}
input {
width: 215px;
height: 20px;
border-radius: 3px;
border: 1.5px solid #e5e7eb;
}
input[type="text"] {
padding-left: 9px;
}
input:focus {
outline-color: #4a6ed6;
border: none;
box-shadow: 2px 2px 5px #bebebe;
}
label {
display: inline-block;
font-size: 10px;
font-weight: 600;
letter-spacing: 1.5px;
text-transform: uppercase;
color: #2e3a4b;
margin-bottom: 3px;
/* margin-left: 2px; */
/* float: left; */
}
<form action="post">
<div class="form-row-1">
<div class="form-flex-container">
<label for="first-name">First Name</label>
<input type="text" name="first-name" id="first-name" />
</div>
<div class="form-flex-container">
<label for="last-name">Last Name</label>
<input type="text" name="last-name" id="last-name" />
</div>
</div>
<div class="form-row-2">
<div class="form-flex-container">
<label for="email">Email</label>
<input type="text" name="email" id="email" />
</div>
<div class="form-flex-container">
<label for="phone-number">Phone Number</label>
<input type="text" name="phone-number" id="phone-number" />
</div>
</div>
<div class="form-row-3">
<div class="form-flex-container">
<label for="password">Password</label>
<input type="text" name="password" id="password" />
</div>
<div class="form-flex-container">
<label for="confirm-password">Confirm Password</label>
<input type="text" name="confirm-password" id="confirm-password" />
</div>
</div>
</form>
I darkened the box shadow so you could see the gap more clearly.
So I discovered what was wrong. Apparently for some reason when I used the property outline-width and outline-color it wasn't actually targeting the outline under the input:focus selector. I had to use the shorthand outline: 1px solid #4a6ed6; to get rid of the gap. So now it works.
See outline property from MDN docs.
Instead of using border: none you can set it to 1.5px solid #4a6ed6 and remove the outline :
input {
width: 215px;
height: 20px;
border-radius: 3px;
border: 1.5px solid #e5e7eb;
}
input:focus {
// outline-color: #4a6ed6;
outline: none;
border: 1.5px solid #4a6ed6;
box-shadow: 2px 2px 5px #bebebe;
}
<form action="post">
<div class="form-row-1">
<div class="form-flex-container">
<input type="text" name="first-name" id="first-name" />
</div>
</div>
</form>
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>
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"] {
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'm currently having a problem with CSS styles in Webkit browswers (Chrome 4.0.249.89 & safari 4.0.4) in which I have a modal window that has a list of labels, radio buttons and some more text describing the what each radio button does. The modal displays correctly in FF 3.5.7
Here's the html for inside the modal,
<div id="rta_top">
<img src="pb_close_off.png" width="17" height="15" alt="Close this window" title="Close this window" id="rta_close" />
<h2 class="rta">Report</h2>
</div>
<div id="pb_bottom">
<div id="error_holder">
<div id="error"></div>
</div>
<br />
Please choose a reason for reporting this ad:
<form action="submit.php" method="post" id="report_form">
<fieldset>
<br />
<label for="incorrect_address">Wrong Address:</label>
<div class="report_ad_radio">
<input type="radio" id="incorrect_address" name="description" value="1" />
</div>
<div class="report_ad_text">
<label for="incorrect_address"> (Ad has wrong address).</label>
</div>
<br />
<label for="duplicate">Duplicate:</label>
<div class="report_ad_radio">
<input type="radio" id="duplicate" name="description" value="2" />
</div>
<div class="report_ad_text">
<label for="duplicate"> (Identical to another ad on-site).</label>
</div>
<br />
<label for="mis_classified">Mis-Classified:</label>
<div class="report_ad_radio">
<input type="radio" id="mis_classified" name="description" value="3" />
</div>
<div class="report_ad_text">
<label for="mis_classified"> (Ad is in the wrong section).</label>
</div>
<br />
<label for="inaccurate">Inaccurate:</label>
<div class="report_ad_radio">
<input type="radio" id="inaccurate" name="description" value="4" />
</div>
<div class="report_ad_text">
<label for="inaccurate"> (No longer available / price changed).</label>
</div>
<br />
<label for="photos">Photo Issue:</label>
<div class="report_ad_radio">
<input type="radio" id="photos" name="description" value="5" />
</div>
<div class="report_ad_text">
<label for="photos"> (Photos are inappropriate or do not belong to this ad).</label>
</div>
<br />
<label for="spam">Spam:</label>
<div class="report_ad_radio">
<input type="radio" id="spam" name="description" value="6" />
</div>
<div class="report_ad_text">
<label for="spam"> (Ad is spam/scam and is not exclusive).</label>
</div>
<br />
<label for="other">Other:</label>
<div class="report_ad_radio">
<input type="radio" id="other" name="description" value="7" />
</div>
<div class="report_ad_text">
<label for="other"> (Other reason, please specify).</label>
</div>
<br />
<br />
<label for="more_info">More Info:</label>
<textarea id="information" name="information"></textarea>
<br />
<br />
<div id="sending">
<div id="loader"></div>
<input type="hidden" name="submit_report_ad" value="1" />
<input type="image" src="/i/button_send_off.png" id="reply_button" name="submit_reply" value="Send ยป" />
</div>
</fieldset>
</div>
</div>
and the css for each element:
#rta_background {
padding: 10px;
background: url(/i/bg_modal_ra.png) no-repeat;
}
#ra_background_sent{
padding: 10px;
background: url(/i/bg_modal_ra_sent.png) no-repeat;
}
#rta_top {
padding: 0 8px 0 18px;
background: #355eae url(/i/bg_linkbar_off.png) repeat-x;
height: 30px;
line-height: 30px;
}
#rta_top h2 {
overflow: hidden;
width: 495px;
height: 30px;
font-size: 14px;
color: #fff;
}
#rta_close {
margin: 7px 0 0;
float: right;
}
#rta #pb_bottom fieldset {
background: #dff;
}
.report_ad_radio {
padding: 5px 0 0 5px;
float: left;
}
#rta #pb_bottom .rta_warning {
margin: 0 auto 6px;
border: 1px solid #f00;
padding: 2px 0;
width: 80%;
height: 15px;
line-height: 15px;
font-size: 12px;
font-weight: bold;
color: #000;
text-align: center;
background: #fdd;
}
#rta #pb_bottom .report_ad_text {
white-space: nowrap;
}
#rta #pb_bottom .report_ad_text label {
margin: 0;
padding: 10px 0 0 0;
width: auto;
font-size: 12px;
font-weight: normal;
cursor: pointer;
background: #00f000;
}
#information {
margin: 5px 0 0 5px;
padding: 2px 2px 2px 2px;
width: 370px;
height: 76px;
border: 1px solid #ccc;
color: #888;
line-height: 1.4;
resize: none;
}
#sending {
float:right;
margin-right: 24px;
}
#pb_bottom #error {
margin: 0 20px 0 50px;
height: 20px;
width: 420px;
}
#loader {
margin-right: 20px;
margin-top: 6px;
float:left;
}
In Safari it looks like this:
Safari http://neilcremins.com/img_dump/modal-saf.png
In Firefox it looks like this:
Firefox http://neilcremins.com/img_dump/modal-ff.png
Wow. Div-soup with everything defined in absolute measures. I don't know where to start. I know, I'll start here: you can only have one label per input, so... let's try this:
HTML:
<label><span class="intro">Wrong address</span><input type="radio" id="wrongaddress"/>(Ad has wrong address)</label>
CSS:
label{display: block}
.intro{width: 12em; float: left; font-weight: bold}
Demo.
Less is more.