I'm trying to left align labels keeping input-fields right-aligned without success!
I was able to align labels or input-fields but not both of them! I've tried a lot of things but nothing worked
html:
<body style="background-color:lightgray;">
<center> <div class="form-style-2">
<div class="form-style-2-heading">Info</div>
<form action="" method="POST">
<label for="cod"><span>Cod <span class="required">*</span></span><input type="text" class="input-field" name="cod" value="" /></label>
<label for="name" ><span>Name <span class="required">*</span></span><input type="text" class="input-field" name="name" value="" /></label>
<label for="phone"><span>Phone <span class="required">*</span></span><input type="text" class="input-field" name="phone" value="" /></label>
<label for="address"><span>Address <span class="required">*</span></span><input type="text" class="input-field" name="address" value="" /></label>
<label><span> </span><input type="submit" value="Submit" /></label>
</form></center>
</div>
</body>
css
.form-style-2{
max-width: 500px;
padding: 20px 12px 10px 20px;
font: 13px Arial, Helvetica, sans-serif;
}
.form-style-2-heading{
font-weight: bold;
font-style: italic;
border-bottom: 2px solid #000;
margin-bottom: 20px;
font-size: 15px;
padding-bottom: 3px;
}
.form-style-2 label{
display: block;
margin: 0px 0px 15px 0px;
}
.form-style-2 label > span{
width: 100px;
font-weight: bold;
float: left;
padding-top: 8px;
padding-right: 5px;
}
.form-style-2 span.required{
color:red;
}
.form-style-2 input.input-field{
width: 48%;
}
.form-style-2 input.input-field,
.form-style-2 .textarea-field{
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
border: 1px solid #C2C2C2;
box-shadow: 1px 1px 4px #EBEBEB;
-moz-box-shadow: 1px 1px 4px #EBEBEB;
-webkit-box-shadow: 1px 1px 4px #EBEBEB;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
padding: 7px;
outline: none;
}
.form-style-2 .input-field:focus,
.form-style-2 .textarea-field:focus{
border: 1px solid #0C0;
}
.form-style-2 .textarea-field{
height:100px;
width: 55%;
}
.form-style-2 input[type=submit],
.form-style-2 input[type=button]{
border: none;
padding: 8px 15px 8px 15px;
background: #4CAF50;
color: #fff;
box-shadow: 1px 1px 4px #DADADA;
-moz-box-shadow: 1px 1px 4px #DADADA;
-webkit-box-shadow: 1px 1px 4px #DADADA;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
}
.form-style-2 input[type=submit]:hover,
.form-style-2 input[type=button]:hover{
background: #EA7B00;
color: #fff;
}
jfiddle: https://jsfiddle.net/uv21fc5o/
You don't want to use the <center> tag. Try using auto margins as I've done here:
https://jsfiddle.net/uv21fc5o/1/
.form-style-2{
max-width: 500px;
padding: 20px 12px 10px 20px;
font: 13px Arial, Helvetica, sans-serif;
margin: 0 auto;
}
Align the text left like so:
CSS
.form-style-2 label > span {
text-align: left;
}
Related
I am adding the following code to my CSS file for my parent div .outertContainer but the border-radius is only affecting the top two corners and not the bottom two corners. I cannot seem to figure it out. Everything else seems to work fine.
*{
background-color: white;
margin: 0;
padding: 0;
}
.outerContainer{
position: absolute;
border-radius: 9px;
top:23%;
right: 10%;
width:30%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 4px 14px 0 rgba(0, 0, 0, 0.17);
}
.input-form-control{
margin-top: 20px;
margin-left: 16px;
width: 80%;
padding: 16px 24px;
border: 1px solid #ccc;
border-radius: 4px;
background-color: white;
line-height: 10px;
font-size: 16px;
}
::placeholder {
color: #99a3a4;
}
.submit-btn{
margin-top: 18px;
margin-left: 17px;
margin-bottom: 65px;
border-radius: 4px;
border: none;
color: white;
padding: 13px 20px;
width: 92%;
text-align: center;
text-decoration: none;
display: inline-block;
}
The following is the html code:
<div className="LoginPage">
<div className="outerContainer">
<form name="form">
<div className="emailLabelInput">
<input type="text" className="login-form-control" name="email" placeholder="Email address"/>
</div>
<div className="passwordLabelInput">
<input type="password" className="login-form-control" name="password" placeholder="Password"/>
</div>
<div className="form-group">
<button className="submit-btn">Log in</button>
</div>
</form>
</div>
</div>
Your problem is you have * { background: white; } which makes the background of all the elements white. Since the form is just as large as the outerContainer and does NOT have a border-radius, it effectively covers up the border-radius applied to the outerContainer. So you have two options to fix the problem:
1 — Remove * { background: white; }. This works for the most part except that the two inputs are still positioned in the top left corner of the outerContainer and of course still covering that corner. If you have those positioned a little differently, this would work.
2 — Add padding: 10px to the outerContainer. This will give the outerContainer a little bit of 'breathing room' and keep the form from covering the corners. See the snippet below.
*{
background:white;
margin: 0;
padding: 0;
}
.LoginPage{
height:100vh;
width:100vw;
}
.outerContainer{
padding:10px; /* Added to show radius */
position: absolute;
border-radius: 9px;
top:23%;
right: 10%;
width:30%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 4px 14px 0 rgba(0, 0, 0, 0.17);
}
.input-form-control{
margin-top: 20px;
margin-left: 16px;
width: 80%;
padding: 16px 24px;
border: 1px solid #ccc;
border-radius: 4px;
background-color: white;
line-height: 10px;
font-size: 16px;
}
::placeholder {
color: #99a3a4;
}
#error-message{
border: 1px solid #ff7f50;
margin-top: 10px;
margin-left: 16px;
width: 80%;
padding: 16px 24px;
border-radius: 4px;
line-height: normal;
font-size: 15px;
}
.submit-btn{
margin-top: 18px;
margin-left: 17px;
margin-bottom: 65px;
border-radius: 4px;
border: none;
color: white;
padding: 13px 20px;
width: 92%;
text-align: center;
text-decoration: none;
display: inline-block;
}
<div class="LoginPage">
<div class="outerContainer">
<form name="form">
<div class="emailLabelInput">
<input type="text" class="login-form-control" name="email" placeholder="Email address"/>
</div>
<div class="passwordLabelInput">
<input type="password" class="login-form-control" name="password" placeholder="Password"/>
</div>
<div class="form-group">
<button class="submit-btn">Log In</button>
</div>
</form>
</div>
</div>
I am trying to design a pop up that seems like Facebook. Currently I had successfully implement pop up code . Now i am finding difficulty in design CSS of the pop up . Kindly help me to design the pop up same like the attached image.
Current Implementation
Final look Pop Up i need
..............................................................................................................................................................
#import url(http://fonts.googleapis.com/css?family=Roboto);
/****** LOGIN MODAL ******/
.loginmodal-container {
padding: 30px;
max-width: 350px;
width: 100% !important;
background-color: #F7F7F7;
margin: 0 auto;
border-radius: 2px;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
overflow: hidden;
font-family: roboto;
}
.loginmodal-container h1 {
text-align: center;
font-size: 1.8em;
font-family: roboto;
}
.loginmodal-container input[type=submit] {
width: 100%;
display: block;
margin-bottom: 10px;
position: relative;
}
.loginmodal-container input[type=text], input[type=password] {
height: 44px;
font-size: 16px;
width: 100%;
margin-bottom: 10px;
-webkit-appearance: none;
background: #fff;
border: 1px solid #d9d9d9;
border-top: 1px solid #c0c0c0;
/* border-radius: 2px; */
padding: 0 8px;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
.loginmodal-container input[type=text]:hover, input[type=password]:hover {
border: 1px solid #b9b9b9;
border-top: 1px solid #a0a0a0;
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}
.loginmodal {
text-align: center;
font-size: 14px;
font-family: 'Arial', sans-serif;
font-weight: 700;
height: 36px;
padding: 0 8px;
/* border-radius: 3px; */
/* -webkit-user-select: none;
user-select: none; */
}
.loginmodal-submit {
/* border: 1px solid #3079ed; */
border: 0px;
color: #fff;
text-shadow: 0 1px rgba(0,0,0,0.1);
background-color: #4d90fe;
padding: 17px 0px;
font-family: roboto;
font-size: 14px;
/* background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#4d90fe), to(#4787ed)); */
}
.loginmodal-submit:hover {
/* border: 1px solid #2f5bb7; */
border: 0px;
text-shadow: 0 1px rgba(0,0,0,0.3);
background-color: #357ae8;
/* background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#4d90fe), to(#357ae8)); */
}
.loginmodal-container a {
text-decoration: none;
color: #666;
font-weight: 400;
text-align: center;
display: inline-block;
opacity: 0.6;
transition: opacity ease 0.5s;
}
.login-help{
font-size: 12px;
}
Login
<div class="modal fade" id="login-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog">
<div class="loginmodal-container">
<h1>Login to Your Account</h1><br>
<form>
<input type="text" name="user" placeholder="Username">
<input type="password" name="pass" placeholder="Password">
<input type="submit" name="login" class="login loginmodal-submit" value="Login">
</form>
<div class="login-help">
Register - Forgot Password
</div>
</div>
</div>
</div>
your html and css tweaked to achieve your final lookup.
check below
#import url(http://fonts.googleapis.com/css?family=Roboto);
/****** LOGIN MODAL ******/
.loginmodal-container {
max-width: 350px;
width: 100% !important;
background-color: #eceff6;
margin: 0 auto;
border-radius: 6px;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
overflow: hidden;
font-family: roboto;
border:8px solid;
border-color:rgba(0,0,0,0.5);
}
#popupHeader
{
background-color:#3c5899;padding:5px;
margin-bottom:25px;
}
.loginmodal-container form{padding:35px;}
.loginmodal-container h1 {
text-align: center;
font-size: 1.2em;
margin:0px;
font-family: roboto;
color:#fff;
}
.loginmodal-container input[type=submit] {
width: 100%;
display: block;
margin-bottom: 10px;
position: relative;
}
.loginmodal-container input[type=text], input[type=password] {
height: 30px;
font-size: 16px;
width: 100%;
-webkit-appearance: none;
background: #fff;
border: 1px solid #d9d9d9;
border-top: 1px solid #c0c0c0;
/* border-radius: 2px; */
padding: 0 8px;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
.loginmodal-container input[type=text]:hover, input[type=password]:hover {
border: 1px solid #b9b9b9;
border-top: 1px solid #a0a0a0;
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}
.loginmodal {
text-align: center;
font-size: 14px;
font-family: 'Arial', sans-serif;
font-weight: 700;
height: 36px;
padding: 0 8px;
/* border-radius: 3px; */
/* -webkit-user-select: none;
user-select: none; */
}
.loginmodal-submit {
/* border: 1px solid #3079ed; */
border: 0px;
color: #fff;
text-shadow: 0 1px rgba(0,0,0,0.1);
background-color: #5e75a7;
padding: 10px 0px;
font-family: roboto;
font-size: 14px;
margin-top:20px;
border-radius:4px;
}
.loginmodal-submit:hover {
/* border: 1px solid #2f5bb7; */
border: 0px;
text-shadow: 0 1px rgba(0,0,0,0.3);
background-color: #6a8acf;
}
.loginmodal-container a {
text-decoration: none;
color: #666;
font-weight: 400;
text-align: center;
display: inline-block;
opacity: 0.6;
transition: opacity ease 0.5s;
}
.login-help{
font-size: 12px;
margin-bottom:50px;
}
.login-help a{display:block;text-align:center;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
Login
<div class="modal fade" id="login-modal" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="loginmodal-container">
<div class="row" id="popupHeader">
<div class="col-xs-12 text">
<h1>Login to Your Account</h1>
</div>
</div>
<form>
<input type="text" name="user" placeholder="Username">
<input type="password" name="pass" placeholder="Password">
<input type="submit" name="login" class="login loginmodal-submit" value="Login">
</form>
<div class="login-help">
RegisterForgot Password
</div>
</div>
</div>
</div>
You can try javascript for this.. in that script function you add styles and check..
Where you are writing code for displaying that modal 'login-modal'??
<div class="Login">
<input type="text" placeholder="Full Name" id="Full Name">
<input type="password" placeholder="Password" id="Password">
forgot password?
<input type="submit" value="Sign In">
</div>
That's my code above but boxes are too far apart. I want them within a few px of each other. I have tried changing the margin and padding on my .css file with no luck. Here is my css below;
.Login {
background: #eceeee;
border: 1px solid #42464b;
border-radius: 6px;
height: 242px;
margin: 15px auto 0;
margin-top: 6px;
width: 288px;
padding-top: 6px;
padding-bottom: 1px;
padding-right: 10px;
}
.Login h1 {
background-image: linear-gradient(top, #f1f3f3, #d4dae0);
border-bottom: 1px solid #a6abaf;
border-radius: 6px 6px 0 0;
box-sizing: border-box;
color: #727678;
display: block;
height: 43px;
font: 600 14px/1 'Open Sans', sans-serif;
padding-top: 6px;
padding-bottom: 1px;
margin: 0px;
text-align: center;
text-shadow: 0 -1px 0 rgba(0,0,0,0.2), 0 1px 0 #fff;
what do I code do I need to change or add to make them closer?
Thanks :)
If you want the input boxes to be closer, you just have to add a negative margin.
.Login > input {
margin-right: -3px;
}
https://jsfiddle.net/do6qhg74/
Or you use float to position the elements next to each other:
.Login > input {
float: left;
}
https://jsfiddle.net/3eq7jwwk/
I changed your code a little bit
.Login {
background: #eceeee;
border: 1px solid #42464b;
border-radius: 6px;
height: 242px;
margin: 15px auto 0;
margin-top: 6px;
width: 500px;
padding-top: 6px;
padding-bottom: 1px;
padding-right: 10px;
text-align:center;
}
.Login h1 {
background-image: linear-gradient(top, #f1f3f3, #d4dae0);
border-bottom: 1px solid #a6abaf;
border-radius: 6px 6px 0 0;
box-sizing: border-box;
color: #727678;
display: block;
height: 43px;
font: 600 14px/1 'Open Sans', sans-serif;
padding-top: 6px;
padding-bottom: 1px;
margin: 0px;
text-align: center;
text-shadow: 0 -1px 0 rgba(0,0,0,0.2), 0 1px 0 #fff; }
.submit, .password {
margin-left:-3px;
}
<div class="Login">
<input type="text" placeholder="Full Name" id="Full Name">
<input class="password" type="password" placeholder="Password" id="Password">
<input class="submit" type="submit" value="Sign In"><br><br>
forgot password?
</div>
(Just press Run snippet)
I've got a form, and I've got a "+" button, text input and "-" button, as the below image shows. I've got a problem, because I can't style it to look it like on picture on all browsers.
Expected:
This is how it looks on my page:
On Chrome looks: And on
Safari: And on
Explorer:
Here is the CSS code:
.qty {
width: 34px;
height: 20px;
text-align: center;
display: block;
}
input.qtyplus {
padding-top: 4px;
width: 34px;
height: 20px;
border-bottom: 2px solid #ff6100;
border-left: 2px solid #ff6100;
border-right: 2px solid #ff6100;
border-top: 2px black;
background: black;
color: #ff6100;
font-weight: bold;
border-radius: 0 0 4px 4px
}
input.qtyminus {
width: 34px;
height: 20px;
border-top: 2px solid #ff6100;
border-left: 2px solid #ff6100;
border-right: 2px solid #ff6100;
border-bottom: 2px black;
background: black;
color: #ff6100;
font-weight: bold;
border-radius: 4px 4px 0 0;
}
input[type=text] {
background: black;
color: white;
font-family: 'Open Sans', sans-serif;
font-size: 15px;
font-weight: bold;
border-left: 2px solid #ff6100;
border-right: 2px solid #ff6100;
border-top: 2px black;
border-bottom: 2px black;
height: 20px;
width: 28px;
margin-top: -1px;
}
<input type='button' value='-' class='qtyminus' field='quantity' />
<input type='text' name='quantity' value='0' class='qty' readonly />
<input type='button' value='+' class='qtyplus' field='quantity' />
This works
.qty {
background: none repeat scroll 0 0 black;
border-width: 2px;
font-weight: bold;
height: 20px;
width: 34px;
cursor: pointer;
}
input.minus {
border-color: #ff6100 #ff6100 black;
border-radius: 4px 4px 0 0;
border-style: solid solid none;
color: #ff6100;
}
input.plus {
border-color: black #ff6100 #ff6100;
border-radius: 0 0 4px 4px;
border-style: none solid solid;
color: #ff6100;
padding-top: 4px;
}
input.num {
border-color: black #ff6100;
border-style: none solid;
color: white;
display: block;
font-family: "Open Sans",sans-serif;
font-size: 15px;
margin-top: -1px;
pointer-events: none;
}
text => button, class changed
<input type='button' value='-' class='qty minus' field='quantity' />
<input type='button' name='quantity' value='0' class='qty num' readonly />
<input type='button' value='+' class='qty plus' field='quantity' />
This seems to work for me in Firefox, IE and Chrome.
Here's an example fiddle: http://jsfiddle.net/rucaj2cr/10/
HTML
<input type='button' value='-' class='qty qtyminus' field='quantity' />
<input type='text' name='quantity' value='0' class='qty' readonly />
<input type='button' value='+' class='qty qtyplus' field='quantity' />
CSS
.qty {
height: 20px;
text-align: center;
display: block;
border-left: 2px solid #ff6100;
border-right: 2px solid #ff6100;
background: black;
font-weight: bold;
padding: 0;
margin: 0;
}
input.qtyplus {
border-bottom: 2px solid #ff6100;
border-top: 2px black;
color: #ff6100;
border-radius: 0 0 4px 4px;
width: 34px;
}
input.qtyminus {
border-top: 2px solid #ff6100;
border-bottom: 2px black;
color: #ff6100;
border-radius: 4px 4px 0 0;
width: 34px;
}
input[type=text] {
color: white;
font-family: 'Open Sans', sans-serif;
font-size: 15px;
border-top: 2px black;
border-bottom: 2px black;
margin-top: -1px;
width: 30px;
}
I have simple form, it is styled in css. JSfiddle link : here
<form action="" method="post" class="basic-grey">
<h1>Report a problem
</h1>
<label>
<span>Your Name :</span>
<input id="name" type="text" name="name" placeholder="Your Name" />
</label>
<label>
<span>Your Email :</span>
<input id="email" type="email" name="email" placeholder="Valid Email Address" />
</label>
<label>
<span>Message :</span>
<textarea id="message" name="message" placeholder="Specify The Problem"></textarea>
</label>
<label>
<span>Subject :</span><select name="selection">
<option value="Job Inquiry">Job Inquiry</option>
<option value="General Question">General Question</option>
</select>
</label>
<label>
<span> </span>
<input type="submit" name="submit" value="Submit" class="button">
</label>
</form>
Here is css style. Problem is that button have big hover area (on left side). I upload example on webhosting. here you can see what i think I tried position:absolute for button but i can not change position. Position:relative does not work too.
.basic-grey {
margin-left:auto;
margin-right:auto;
max-width: 500px;
padding: 25px 15px 25px 10px;
font: 12px Georgia, "Times New Roman", Times, serif;
color: #000;
text-shadow: 1px 1px 1px #FFF;
}
.basic-grey h1 {
font-size: 25px;
padding: 0px 0px 10px 40px;
display: block;
border-bottom:1px solid #C9C9C9;
margin: -10px -15px 30px -10px;;
color: #000;
}
.basic-grey h1>span {
display: block;
font-size: 11px;
}
.basic-grey label {
margin: 0px;
}
.basic-grey label>span {
float: left;
width: 20%;
text-align: right;
padding-right: 10px;
margin-top: 10px;
color: #000;
}
.basic-grey input[type="text"], .basic-grey input[type="email"], .basic-grey textarea, .basic-grey select {
border: 1px solid #DADADA;
color: #000;
height: 30px;
margin-bottom: 16px;
margin-right: 6px;
margin-top: 2px;
outline: 0 none;
padding: 3px 3px 3px 5px;
width: 70%;
font-size: 12px;
line-height:15px;
box-shadow: inset 0px 1px 4px #ECECEC;
-moz-box-shadow: inset 0px 1px 4px #ECECEC;
-webkit-box-shadow: inset 0px 1px 4px #ECECEC;
}
.basic-grey textarea{
padding: 5px 3px 3px 5px;
}
.basic-grey select {
appearance:none;
-webkit-appearance:none;
-moz-appearance: none;
text-indent: 0.01px;
text-overflow: '';
width: 70%;
height: 35px;
line-height: 25px;
}
.basic-grey textarea{
height:100px;
}
.basic-grey.button {
opacity:0.7;
background: #55596C;
padding: 10px 15px 10px 15px;
color: #FFF;
box-shadow: 1px 1px 5px #B6B6B6;
border-radius: 3px;
text-shadow: 1px 1px 1px #000;
cursor: pointer;
}
.basic-grey.button:hover {
opacity:0.7;
background: #373E4D;
}
It's caused by the <label></label> that your button is enclosed in. Just enclose it in a div instead:
<div>
<span> </span>
<input type="submit" name="submit" value="Submit" class="button">
</div>
If you want this div to look the same as the label, you can give it a css class, e.g. class="label" and assign the same CSS properties to "div.label" and "label".
Remove span before input and set margin-left for input. jsfiddle
<label>
<input style="margin-left: 110px" type="submit" name="submit" value="Submit" class="button">
</label>