Related
I'm having trouble reformatting this form, two of the fields overlap in the middle and I can't for the life of me figure out why, or how to fix it. The form itself works perfectly fine, it's just the alignment that's wrong. I'm not sure if the new CSS doesn't like the spray fields and that's causing the issue. I applied this style to a couple of other forms on our site and they swapped over without a hitch, it's just been this one fighting me. I've tried using <br> and that doesn't change the issue
.form-2 {
font-family: 'Ubuntu', 'Lato', sans-serif;
font-weight: 400;
/* Size and position */
width: 650px;
position: relative;
margin: 20px auto 30px;
padding: 10px;
overflow: hidden;
/* Styles */
background: #111;
border-radius: 0.4em;
border: 1px solid #191919;
box-shadow:
inset 0 0 2px 1px rgba(255,255,255,0.08),
0 16px 10px -8px rgba(0, 0, 0, 0.6);
}
.form-2 label {
/* Size and position */
width: 20%;
float: left;
padding-top: 9px;
/* Styles */
color: #ddd;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 1px;
text-shadow: 0 1px 0 #000;
text-indent: 10px;
font-weight: 700;
cursor: pointer;
}
.form-2 input[type=text],
.form-2 input[type=password] {
/* Size and position */
width: 60%;
float: left;
padding: 8px 5px;
margin-bottom: 10px;
font-size: 12px;
/* Styles */
background: #1f2124; /* Fallback */
background: -moz-linear-gradient(#1f2124, #27292c);
background: -ms-linear-gradient(#1f2124, #27292c);
background: -o-linear-gradient(#1f2124, #27292c);
background: -webkit-gradient(linear, 0 0, 0 100%, from(#1f2124), to(#27292c));
background: -webkit-linear-gradient(#1f2124, #27292c);
background: linear-gradient(#1f2124, #27292c);
border: 1px solid #000;
box-shadow:
0 1px 0 rgba(255,255,255,0.1);
border-radius: 3px;
/* Font styles */
font-family: 'Ubuntu', 'Lato', sans-serif;
color: #fff;
}
.form-2 input[type=text]:hover,
.form-2 input[type=password]:hover,
.form-2 label:hover ~ input[type=text],
.form-2 label:hover ~ input[type=password] {
background: #27292c;
}
.form-2 input[type=text]:focus,
.form-2 input[type=password]:focus {
box-shadow: inset 0 0 2px #000;
background: #494d54;
border-color: #986893;
border-width: 2px;
outline: none; /* Remove Chrome outline */
}
.form-2 p:nth-child(3),
.form-2 p:nth-child(4) {
float: left;
width: 50%;
}
.form-2 label[for=remember] {
width: auto;
float: none;
display: inline-block;
text-transform: capitalize;
font-size: 11px;
font-weight: 400;
letter-spacing: 0px;
text-indent: 2px;
}
.form-2 input[type=checkbox] {
margin-left: 10px;
vertical-align: middle;
}
.form-2 input[type=submit] {
/* Width and position LOGIN BUTTON*/
width: 35%;
padding: 8px 5px;
/* Styles */
border: 1px solid #0273dd; /* Fallback */
border: 1px solid rgba(0,0,0,0.4);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.3),
inset 0 10px 10px rgba(255,255,255,0.1);
border-radius: 3px;
background: #6C2866;
cursor:pointer;
/* Font styles */
font-family: 'Ubuntu', 'Lato', sans-serif;
color: white;
font-weight: 700;
font-size: 18px;
text-shadow: 0 -1px 0 rgba(0,0,0,0.8);
}
.form-2 input[value=Register] {
/* Width and position REGISTER BUTTON*/
width: 35%;
padding: 8px 5px;
/* Styles */
border: 1px solid #0273dd; /* Fallback */
border: 1px solid rgba(0,0,0,0.4);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.3),
inset 0 10px 10px rgba(255,255,255,0.1);
border-radius: 3px;
background: #6C2866;
cursor:pointer;
/* Font styles */
font-family: 'Ubuntu', 'Lato', sans-serif;
color: white;
font-weight: 700;
font-size: 18px;
text-shadow: 0 -1px 0 rgba(0,0,0,0.8);
}
.form-2 .Reset {
/* Width and position REGISTER BUTTON*/
width: 40%;
padding: 8px 5px;
/* Styles */
border: 1px solid #0273dd; /* Fallback */
border: 1px solid rgba(0,0,0,0.4);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.3),
inset 0 10px 10px rgba(255,255,255,0.1);
border-radius: 3px;
background: #6C2866;
cursor:pointer;
/* Font styles */
font-family: 'Ubuntu', 'Lato', sans-serif;
color: white;
font-weight: 700;
font-size: 18px;
text-shadow: 0 -1px 0 rgba(0,0,0,0.8);
}
.form-2 input[type=submit]:hover {
box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
}
.form-2 input[type=submit]:active {
background: #287db5;
box-shadow: inset 0 0 3px rgba(0,0,0,0.6);
border-color: #000; /* Fallback */
border-color: rgba(0,0,0,0.9);
}
.no-boxshadow .form-2 input[type=submit]:hover {
background: #2a92d8;
}
.form-2:after {
/* Size and position */
content: "";
height: 1px;
width: 33%;
position: absolute;
left: 20%;
top: 0;
/* Styles */
background: -moz-linear-gradient(left, transparent, #444, #b6b6b8, #444, transparent);
background: -ms-linear-gradient(left, transparent, #444, #b6b6b8, #444, transparent);
background: -o-linear-gradient(left, transparent, #444, #b6b6b8, #444, transparent);
background: -webkit-gradient(linear, 0 0, 100% 0, from(transparent), color-stop(0.25, #444), color-stop(0.5, #b6b6b8), color-stop(0.75, #444), to(transparent));
background: -webkit-linear-gradient(left, transparent, #444, #b6b6b8, #444, transparent);
background: linear-gradient(left, transparent, #444, #b6b6b8, #444, transparent);
}
.form-2:before {
/* Size and position */
content: "";
width: 8px;
height: 5px;
position: absolute;
left: 34%;
top: -7px;
/* Styles */
border-radius: 50%;
box-shadow: 0 0 6px 4px #fff;
}
.form-2 p:nth-child(1):before{
/* Size and position */
content:"";
width:250px;
height:100px;
position:absolute;
top:0;
left:45px;
/* Styles */
-webkit-transform: rotate(75deg);
-moz-transform: rotate(75deg);
-ms-transform: rotate(75deg);
-o-transform: rotate(75deg);
transform: rotate(75deg);
background: -moz-linear-gradient(50deg, rgba(255,255,255,0.15), rgba(0,0,0,0));
background: -ms-linear-gradient(50deg, rgba(255,255,255,0.15), rgba(0,0,0,0));
background: -o-linear-gradient(50deg, rgba(255,255,255,0.15), rgba(0,0,0,0));
background: -webkit-linear-gradient(50deg, rgba(255,255,255,0.15), rgba(0,0,0,0));
background: linear-gradient(50deg, rgba(255,255,255,0.15), rgba(0,0,0,0));
pointer-events:none;
}
.no-pointerevents .form-2 p:nth-child(1):before {
display: none;
}
<center>
<h1><font color="red">User Registration</font></h1>
</center>
<section class="main">
<form id="form1" name="form1" method="POST" action="<?php echo $editFormAction; ?>" class="form-2">
<p class="clearfix">
<br />
<label for="Username">Username</label>
<span id="sprytextfield3">
<input type="text" name="Username" id="Username" />
<span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldMinCharsMsg">Minimum number of characters not met.</span><span class="textfieldMaxCharsMsg">Exceeded maximum number of characters.</span></span>
</p>
<p class="clearfix">
<label for="Password">Password</label>
<span id="sprytextfield2">
<input type="password" name="Password" id="Password" />
<span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldMinCharsMsg">Minimum number of characters not met.</span><span class="textfieldMaxCharsMsg">Exceeded maximum number of characters.</span></span>
</p>
<p class="clearfix">
<label for="passval">Confirm Password</label>
<span id="spryconfirm1">
<input type="password" name="passval" id="passval" />
<span class="confirmRequiredMsg">Required.</span><span class="confirmInvalidMsg">The values don't match.</span></span>
</p>
<p class="clearfix">
<label for="EmailAddress">Email Address</label>
<span id="sprytextfield1">
<input type="text" name="EmailAddress" id="EmailAddress" />
<span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldInvalidFormatMsg">Invalid format.</span><span class="textfieldMinCharsMsg">Minimum number of characters not met.</span><span class="textfieldMaxCharsMsg">Exceeded maximum number of characters.</span></span>
</p>
<p class="clearfix">
<label for="Security">What is your favorite food?</label>
<span id="sprytextfield4">
<input type="text" name="Security" id="Security" />
<span class="textfieldRequiredMsg">A value is required.</span></span>
<br />
</p>
<br /><br />
<input type="submit" name="SubmitUserForm" id="SubmitUserForm" value="submit" />
</p>
<input type="hidden" name="MM_insert" value="form1" />
<br /><br /><br />
There was some style in your form
.form-2 p:nth-child(3),
.form-2 p:nth-child(4) {
float: left;
width: 50%;
}
They have 50% width, that's why there have another 50% of the width, for that reason they were overlapping
.form-2 {
font-family: 'Ubuntu', 'Lato', sans-serif;
font-weight: 400;
/* Size and position */
width: 650px;
position: relative;
margin: 20px auto 30px;
padding: 10px;
overflow: hidden;
/* Styles */
background: #111;
border-radius: 0.4em;
border: 1px solid #191919;
box-shadow:
inset 0 0 2px 1px rgba(255,255,255,0.08),
0 16px 10px -8px rgba(0, 0, 0, 0.6);
}
.form-2 label {
/* Size and position */
width: 20%;
float: left;
padding-top: 9px;
/* Styles */
color: #ddd;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 1px;
text-shadow: 0 1px 0 #000;
text-indent: 10px;
font-weight: 700;
cursor: pointer;
}
.form-2 input[type=text],
.form-2 input[type=password] {
/* Size and position */
width: 60%;
float: left;
padding: 8px 5px;
margin-bottom: 10px;
font-size: 12px;
/* Styles */
background: #1f2124; /* Fallback */
background: -moz-linear-gradient(#1f2124, #27292c);
background: -ms-linear-gradient(#1f2124, #27292c);
background: -o-linear-gradient(#1f2124, #27292c);
background: -webkit-gradient(linear, 0 0, 0 100%, from(#1f2124), to(#27292c));
background: -webkit-linear-gradient(#1f2124, #27292c);
background: linear-gradient(#1f2124, #27292c);
border: 1px solid #000;
box-shadow:
0 1px 0 rgba(255,255,255,0.1);
border-radius: 3px;
/* Font styles */
font-family: 'Ubuntu', 'Lato', sans-serif;
color: #fff;
}
.form-2 input[type=text]:hover,
.form-2 input[type=password]:hover,
.form-2 label:hover ~ input[type=text],
.form-2 label:hover ~ input[type=password] {
background: #27292c;
}
.form-2 input[type=text]:focus,
.form-2 input[type=password]:focus {
box-shadow: inset 0 0 2px #000;
background: #494d54;
border-color: #986893;
border-width: 2px;
outline: none; /* Remove Chrome outline */
}
.form-2 label[for=remember] {
width: auto;
float: none;
display: inline-block;
text-transform: capitalize;
font-size: 11px;
font-weight: 400;
letter-spacing: 0px;
text-indent: 2px;
}
.form-2 input[type=checkbox] {
margin-left: 10px;
vertical-align: middle;
}
.form-2 input[type=submit] {
/* Width and position LOGIN BUTTON*/
width: 35%;
padding: 8px 5px;
/* Styles */
border: 1px solid #0273dd; /* Fallback */
border: 1px solid rgba(0,0,0,0.4);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.3),
inset 0 10px 10px rgba(255,255,255,0.1);
border-radius: 3px;
background: #6C2866;
cursor:pointer;
/* Font styles */
font-family: 'Ubuntu', 'Lato', sans-serif;
color: white;
font-weight: 700;
font-size: 18px;
text-shadow: 0 -1px 0 rgba(0,0,0,0.8);
}
.form-2 input[value=Register] {
/* Width and position REGISTER BUTTON*/
width: 35%;
padding: 8px 5px;
/* Styles */
border: 1px solid #0273dd; /* Fallback */
border: 1px solid rgba(0,0,0,0.4);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.3),
inset 0 10px 10px rgba(255,255,255,0.1);
border-radius: 3px;
background: #6C2866;
cursor:pointer;
/* Font styles */
font-family: 'Ubuntu', 'Lato', sans-serif;
color: white;
font-weight: 700;
font-size: 18px;
text-shadow: 0 -1px 0 rgba(0,0,0,0.8);
}
.form-2 .Reset {
/* Width and position REGISTER BUTTON*/
width: 40%;
padding: 8px 5px;
/* Styles */
border: 1px solid #0273dd; /* Fallback */
border: 1px solid rgba(0,0,0,0.4);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.3),
inset 0 10px 10px rgba(255,255,255,0.1);
border-radius: 3px;
background: #6C2866;
cursor:pointer;
/* Font styles */
font-family: 'Ubuntu', 'Lato', sans-serif;
color: white;
font-weight: 700;
font-size: 18px;
text-shadow: 0 -1px 0 rgba(0,0,0,0.8);
}
.form-2 input[type=submit]:hover {
box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
}
.form-2 input[type=submit]:active {
background: #287db5;
box-shadow: inset 0 0 3px rgba(0,0,0,0.6);
border-color: #000; /* Fallback */
border-color: rgba(0,0,0,0.9);
}
.no-boxshadow .form-2 input[type=submit]:hover {
background: #2a92d8;
}
.form-2:after {
/* Size and position */
content: "";
height: 1px;
width: 33%;
position: absolute;
left: 20%;
top: 0;
/* Styles */
background: -moz-linear-gradient(left, transparent, #444, #b6b6b8, #444, transparent);
background: -ms-linear-gradient(left, transparent, #444, #b6b6b8, #444, transparent);
background: -o-linear-gradient(left, transparent, #444, #b6b6b8, #444, transparent);
background: -webkit-gradient(linear, 0 0, 100% 0, from(transparent), color-stop(0.25, #444), color-stop(0.5, #b6b6b8), color-stop(0.75, #444), to(transparent));
background: -webkit-linear-gradient(left, transparent, #444, #b6b6b8, #444, transparent);
background: linear-gradient(left, transparent, #444, #b6b6b8, #444, transparent);
}
.form-2:before {
/* Size and position */
content: "";
width: 8px;
height: 5px;
position: absolute;
left: 34%;
top: -7px;
/* Styles */
border-radius: 50%;
box-shadow: 0 0 6px 4px #fff;
}
.form-2 p:nth-child(1):before{
/* Size and position */
content:"";
width:250px;
height:100px;
position:absolute;
top:0;
left:45px;
/* Styles */
-webkit-transform: rotate(75deg);
-moz-transform: rotate(75deg);
-ms-transform: rotate(75deg);
-o-transform: rotate(75deg);
transform: rotate(75deg);
background: -moz-linear-gradient(50deg, rgba(255,255,255,0.15), rgba(0,0,0,0));
background: -ms-linear-gradient(50deg, rgba(255,255,255,0.15), rgba(0,0,0,0));
background: -o-linear-gradient(50deg, rgba(255,255,255,0.15), rgba(0,0,0,0));
background: -webkit-linear-gradient(50deg, rgba(255,255,255,0.15), rgba(0,0,0,0));
background: linear-gradient(50deg, rgba(255,255,255,0.15), rgba(0,0,0,0));
pointer-events:none;
}
.no-pointerevents .form-2 p:nth-child(1):before {
display: none;
}
<center>
<h1><font color="red">User Registration</font></h1>
</center>
<section class="main">
<form id="form1" name="form1" method="POST" action="<?php echo $editFormAction; ?>" class="form-2">
<p class="clearfix">
<br />
<label for="Username">Username</label>
<span id="sprytextfield3">
<input type="text" name="Username" id="Username" />
<span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldMinCharsMsg">Minimum number of characters not met.</span><span class="textfieldMaxCharsMsg">Exceeded maximum number of characters.</span></span>
</p>
<p class="clearfix">
<label for="Password">Password</label>
<span id="sprytextfield2">
<input type="password" name="Password" id="Password" />
<span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldMinCharsMsg">Minimum number of characters not met.</span><span class="textfieldMaxCharsMsg">Exceeded maximum number of characters.</span></span>
</p>
<p class="clearfix">
<label for="passval">Confirm Password</label>
<span id="spryconfirm1">
<input type="password" name="passval" id="passval" />
<span class="confirmRequiredMsg">Required.</span><span class="confirmInvalidMsg">The values don't match.</span></span>
</p>
<p class="clearfix">
<label for="EmailAddress">Email Address</label>
<span id="sprytextfield1">
<input type="text" name="EmailAddress" id="EmailAddress" />
<span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldInvalidFormatMsg">Invalid format.</span><span class="textfieldMinCharsMsg">Minimum number of characters not met.</span><span class="textfieldMaxCharsMsg">Exceeded maximum number of characters.</span></span>
</p>
<p class="clearfix">
<label for="Security">What is your favorite food?</label>
<span id="sprytextfield4">
<input type="text" name="Security" id="Security" />
<span class="textfieldRequiredMsg">A value is required.</span></span>
<br />
</p>
<br /><br />
<input type="submit" name="SubmitUserForm" id="SubmitUserForm" value="submit" />
</p>
<input type="hidden" name="MM_insert" value="form1" />
<br /><br /><br />
The following html code gives a html form in a table but though i aligned the table to center it does not align to the center and remains in the left side of the web page!
<!DOCTYPE html>
<html>
<head>
<style>input.textfill {
float: right;
}</style>
<link type="text/css" rel="stylesheet" href="order.css" >
<script type="text/javascript">
var textbox = function(me){
if(me.checked == false){
var textb = document.createElement('textarea');
textb.name = "Address";
textb.id="Address";
textb.required=true;
textb.placeholder="Address";
me.parentNode.appendChild(textb);
}
setInterval(function(){
if(me.checked == false){
me.parentNode.removeChild(textb);
return false;
}
});
};
var i = 1;
function addkid() {
if (i <= 2) {
i++;
var div = document.createElement('div');
div.innerHTML ='<br><div class="headingbox">'+ 'Prescription Copy-'+i+':'+'</div>'+'<br><input id="uploadFile-' + i + '" class="disableInputField" placeholder="Choose File" disabled="disabled" />'+'<label class="fileUpload">'+'<input id="uploadBtn-' + i + '" type="file" required class="upload" name="Image'+i+'" />'+'<span class="uploadBtn-' + i + '">Upload</span>'+'</label>'+' <input id=remove type="button" value="-" onclick="removekid(this)">';
document.getElementById('kids').appendChild(div);
document.getElementById("uploadBtn-" + i).onchange = function() {
document.getElementById("uploadFile-"+i).value = this.value;
};
}
}
function removekid(div) {
document.getElementById('kids').removeChild(div.parentNode);
i--;
}
</script>
</head>
<body bgcolor="#E6E6FA">
<form id=orders name="orders" action="orders_action.php" method="post" enctype="multipart/form-data" onsubmit="return Validate(this);onTimeChange ();">
<table align="Center" >
<tr><td height="40"><br>
<div class="headingbox" id="hBoxNIC" > National ID </div>
<div style="width:100%;text-align:center;">
<input type="text" placeholder="920290505v" maxlength="13" name=NIC required autofocus />
</div>
</td></tr>
<tr><td height=50 ><div class="headingboxs">Pick up</div>
<input type=radio name=DP required value="Pickup">
<div style=" float: right;"><div class="headingboxs">
Delivery</div>
<input class="textfill" type=radio name=DP required value="Delivery" onmouseup="textbox(this)" /></div><br><br></td></tr>
<tr><td height="50"><div class="headingbox" >Expected Time </div>
<div style="width:100%;text-align:center;">
<input type="time" id=time autofocus name=DPTime onfocusout="hid('timeerror2');" onfocus="show('timeerror2');"min="09:00:00" max="22:00:00" /><br>
</div>
<div class="poperror" id="timeerror2"> Pharmacy is opened from 9AM to 10PM </div>
<script>
var input = document.getElementById('time');
function validateTime (element) {
var minTime = element.min;
var maxTime = element.max
var value = element.value + ':00'
if(minTime > value || value > maxTime) {
console.log("Time is outside of min/max.");
}
}
</script>
</td></tr>
<tr><td height="50"><div class="headingbox" id="hBoxPN"> Phone Number </div>
<div style="width:100%;text-align:center;">
<input type="text" maxlength=10; autofocus name=Tele /><br>
</div>
<div class="error" id="phoneerror" > error occured </div><br></td></tr>
<tr><td height="50"><div class="headingbox" id="hBoxEM"> E-mail </div>
<div style="width:100%;text-align:center;">
<input type="text" autofocus name=Email placeholder="xxx#gmail.com" /><br>
</div>
<div class="error" id="emailerror" > error occured </div><br>
</td></tr>
<tr>
<td height="50" width=330><br><div class="headingbox"> Prescription Copy-1</div> <div id="kids">
<input id="uploadFile" class="disableInputField" placeholder="Choose File" disabled="disabled" />
<label class="fileUpload">
<input id="uploadBtn" type="file" class="upload" name=Image1 />
<span class="uploadBtn">Upload</span>
</label>
<input type="button" id="add" onclick="addkid()" value="+" />
</div></td></tr>
<script>
document.getElementById("uploadBtn" ).onchange = function() {
document.getElementById("uploadFile").value = this.value;
};
</script>
</div></td></tr>
<tr><td colspan=5 align=center>
<input class="button" type=submit name=submit value=Place >
<input class="button" type=reset name=reset value=Cancel> </td></tr>
</table>
</form>
</body>
</body>
</html>
The css code is as follows
* { margin:0; padding:0;font-family: Arial; }
#orders {
padding: 0px 25px 25px;
background: #dcdcfb;
box-shadow:
0px 0px 0px 5px rgba( 255,255,255,0.4 ),
0px 4px 20px rgba( 0,0,0,0.33 );
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
display: table;
position:center;
width:60%;
margin: 20px;
}
#orders .inputs .buttonS {
width: 100%;
outline:none;
margin-top: 20px;
padding: 15px 0;
color: #fff;
font-size: 14px;
font-weight: 500;
letter-spacing: 1px;
text-align: center;
text-decoration: none;
background: -moz-linear-gradient(
top,
#b9c5dd 0%,
#a4b0cb);
background: -webkit-gradient(
linear, left top, left bottom,
from(#b9c5dd),
to(#a4b0cb));
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
border: 1px solid #737b8d;
-moz-box-shadow:
0px 5px 5px rgba(000,000,000,0.1),
inset 0px 1px 0px rgba(255,255,255,0.5);
-webkit-box-shadow:
0px 5px 5px rgba(000,000,000,0.1),
inset 0px 1px 0px rgba(255,255,255,0.5);
box-shadow:
0px 5px 5px rgba(000,000,000,0.1),
inset 0px 1px 0px rgba(255,255,255,0.5);
text-shadow:
0px 1px 3px rgba(000,000,000,0.3),
0px 0px 0px rgba(255,255,255,0);
display: table;
position: static;
clear: both;
}
#orders .inputs .buttonS:hover {
background: -moz-linear-gradient(
top,
#a4b0cb 0%,
#b9c5dd);
background: -webkit-gradient(
linear, left top, left bottom,
from(#a4b0cb),
to(#b9c5dd));
}
#orders .inputs .buttonDis {
outline:none;
width: 100%;
margin-top: 20px;
padding: 15px 0;
color: #fff;
font-size: 14px;
font-weight: 500;
letter-spacing: 1px;
text-align: center;
text-decoration: none;
background: -moz-linear-gradient(
top,
#e0e0e0 0%,
#bfbfbf);
background: -webkit-gradient(
linear, left top, left bottom,
from(#e0e0e0),
to(#bfbfbf));
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
border: 1px solid #737b8d;
-moz-box-shadow:
0px 5px 5px rgba(000,000,000,0.1),
inset 0px 1px 0px rgba(255,255,255,0.5);
-webkit-box-shadow:
0px 5px 5px rgba(000,000,000,0.1),
inset 0px 1px 0px rgba(255,255,255,0.5);
box-shadow:
0px 5px 5px rgba(000,000,000,0.1),
inset 0px 1px 0px rgba(255,255,255,0.5);
text-shadow:
0px 1px 3px rgba(000,000,000,0.3),
0px 0px 0px rgba(255,255,255,0);
display: table;
position: static;
clear: both;
}
#Address{
background: #f5f5f5;
font-size: 0.8rem;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
border: none;
padding: 13px 10px;
width: 90%;
margin: auto;
margin-bottom: 17px;
box-shadow: inset 0px 2px 3px rgba( 0,0,0,0.1 );
-ms-box-sizing:content-box;
-moz-box-sizing:content-box;
box-sizing:content-box;
-webkit-box-sizing:content-box;
transition: all .5s ease-in-out;
}
.inputs select, input[type=date], input[type=text], input[type=password],input[type=time] {
background: #f5f5f5;
font-size: 0.8rem;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
border: none;
padding: 13px 10px;
width: 90%;
margin: auto;
margin-bottom: 17px;
box-shadow: inset 0px 2px 3px rgba( 0,0,0,0.1 );
-ms-box-sizing:content-box;
-moz-box-sizing:content-box;
box-sizing:content-box;
-webkit-box-sizing:content-box;
transition: all .5s ease-in-out;
}
.inputs select:focus, input[type=date], input[type=text]:focus{
background: #fff;
box-shadow: 0px 0px 0px 3px #8efffc, inset 0px 2px 3px rgba( 0,0,0,0.2 ), 0px 5px 5px rgba( 0,0,0,0.15 );
outline: none;
}
.inputs ul li label{
display: block;
position: relative;
font-weight: 300;
font-size: 18px;
padding: 25px 25px 25px 80px;
margin: 10px auto;
height: 30px;
z-index: 9;
cursor: pointer;
-webkit-transition: all 0.25s linear;
}
.inputs ul li:hover label{
color: #FFFFFF;
}
.inputs ul li .check{
display: block;
position: absolute;
border: 5px solid #AAAAAA;
border-radius: 100%;
height: 25px;
width: 25px;
top: 30px;
left: 20px;
z-index: 5;
transition: border .25s linear;
-webkit-transition: border .25s linear;
}
.inputs input[type=radio]:checked ~ label{
color: #0DFF92;
}
.headingboxs{ /*for the radio button headings */
position:relative;
text-align:left;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 2px;
padding-top: 5px;
border-top-left-radius:2em;
border-top-right-radius:-2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:-2em;
border-bottom-left-radius:-2em;
background: white;
left: 2%;
font-weight: bold;
display: inline-block;
box-shadow: inset 0px 2px 3px rgba( 0,0,0,0.1 );
transition: all .5s ease-in-out;
}
.headingbox{ /*for other headings */
position:relative;
text-align:left;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 2px;
padding-top: 5px;
border-top-left-radius:2em;
border-top-right-radius:0;
border-bottom-right-radius:2em;
border-bottom-left-radius:-2em;
border-bottom-left-radius:-2em;
background: white;
left: 4%;
font-weight: bold;
display: inline-block;
box-shadow: inset 0px 2px 3px rgba( 0,0,0,0.1 );
transition: all .5s ease-in-out;
}
.headbox{ /*for other headings */
position:relative;
text-align:left;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 2px;
padding-top: 5px;
background: white;
left: 4%;
font-weight: bold;
display: inline-block;
box-shadow: inset 0px 2px 3px rgba( 0,0,0,0.1 );
transition: all .5s ease-in-out;
}
.poperror {
opacity:0;
visibility: visible;
width: 300px;
background-color: white;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 5;
!top: 100%;
!left: 100%;
margin-left: 10px;
margin-top: -15px;
-moz-box-shadow: 0 0 10px black;
-webkit-box-shadow: 0 0 10px black;
box-shadow: 0 0 10px black;
-webkit-transition: opacity 0.4s;
-moz-transition: opacity 0.4s;
-o-transition: opacity 0.4s;
transition: opacity 0.4s;
}
.poperror::after {
content: "";
position: absolute;
bottom: 100%;
left: 5%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent white transparent;
}
.error{
color:red;
font-size:10px;
text-align:left;
width: 350px;
margin-left:auto;
margin-right:auto;
margin-top:-12px;
margin-bottom:-10px;
font-style: italic;
-webkit-transition: opacity 0.4s;
-moz-transition: opacity 0.4s;
-o-transition: opacity 0.4s;
transition: opacity 0.4s;
opacity:0;
}
.column{
width:50%;
float:left;
}
*{
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
#remove{
width: 30px;
font-size: 20px;
background-color: gray;
color: white;
}
#add{
width: 30px;
font-size: 20px;
background-color: gray;
color: white;
}
.inputBtnSection{
display:inline-block;
vertical-align:top;
font-size:0;
font-family:verdana;
}
.disableInputField{
display:inline-block;
vertical-align:top;
height: 27px;
margin: 0;
font-size:14px;
padding:0 3px;
}
.fileUpload {
position: relative;
overflow: hidden;
display:inline-block;
vertical-align:top;
}
.fileUpload-2 {
position: relative;
overflow: hidden;
display:inline-block;
vertical-align:top;
}
.fileUpload-3 {
position: relative;
overflow: hidden;
display:inline-block;
vertical-align:top;
}
.uploadBtn{
display:inline-block;
vertical-align:top;
background:rgba(0,0,0,0.5);
font-size:14px;
padding:0 10px;
height:25px;
line-height:22px;
color:#fff;
border-radius: 5px;
}
.uploadBtn-2{
display:inline-block;
vertical-align:top;
background:rgba(0,0,0,0.5);
font-size:14px;
padding:0 10px;
height:25px;
line-height:22px;
color:#fff;
border-radius: 5px;
}
.uploadBtn-3{
display:inline-block;
vertical-align:top;
background:rgba(0,0,0,0.5);
font-size:14px;
padding:0 10px;
height:25px;
line-height:22px;
color:#fff;
border-radius: 5px;
}
.fileUpload input.upload {
position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 0;
font-size: 20px;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
}
table {
align-self: center;
border: 2px solid CadetBlue;
border-radius: 5px;
}
#add_kid(){
width: 50px;
font-size: 10px;
}
.button:hover {
cursor:pointer;
background: -moz-linear-gradient(
top,
#a4b0cb 0%,
#b9c5dd);
background: -webkit-gradient(
linear, left top, left bottom,
from(#a4b0cb),
to(#b9c5dd));
}
.button{
margin-left:30px;
outline:none;
width: 20%;
margin-top: 20px;
padding: 15px 0;
color: #fff;
font-size: 14px;
font-weight: 500;
letter-spacing: 1px;
text-align: center;
text-decoration: none;
background: -moz-linear-gradient(
top,
#e0e0e0 0%,
#bfbfbf);
width: 150px;
background-color:grey;
border-radius: 5px;
height: 40px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
border: 1px solid #737b8d;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background: -webkit-gradient(
linear, left top, left bottom,
from(#e0e0e0),
to(#bfbfbf));
-moz-box-shadow:
0px 5px 5px rgba(000,000,000,0.1),
inset 0px 1px 0px rgba(255,255,255,0.5);
-webkit-box-shadow:
0px 5px 5px rgba(000,000,000,0.1),
inset 0px 1px 0px rgba(255,255,255,0.5);
box-shadow:
0px 5px 5px rgba(000,000,000,0.1),
inset 0px 1px 0px rgba(255,255,255,0.5);
text-shadow:
0px 1px 3px rgba(000,000,000,0.3),
0px 0px 0px rgba(255,255,255,0);
}
#white-background{
display: none;
width: 100%;
height: 100%;
position: fixed;
top: 0px;
left: 0px;
background-color: #fefefe;
opacity: 0.7;
z-index: 9999;
}
#dlgbox{
/*initially dialog box is hidden*/
display: none;
position: fixed;
width: 480px;
z-index: 9999;
border-radius: 10px;
background-color: #7c7d7e;
}
#dlg-header{
background-color:aliceblue;
color: white;
font-size: 20px;
padding: 10px;
margin: 10px 10px 0px 10px;
}
#dlg-body{
background-color: white;
color: black;
font-size: 14px;
padding: 10px;
margin: 0px 10px 0px 10px;
}
#dlg-footer{
background-color: #f2f2f2;
text-align: right;
padding: 10px;
margin: 0px 10px 10px 10px;
}
#dlg-footer button{
background-color: grey;
color: white;
padding: 5px;
border: 0px;
}
please help to rectify this problem so that i can align the form to the center
form {
width: 980px;
margin: 0 auto;
}
Declare the width. So you can use the value AUTO in margin. margin: 0 auto do the trick
How do I style a button, with a shadow, so that it looks like it is pressed in?
I tried using box-shadow: ... ;. But this didn't have any affect.
By creatively styling the :active or :focus pseudo classes using a box-shadow: inset ...;
Using the :active pseudo class:
button {
background: #ededed;
border: 1px solid #ccc;
padding: 10px 30px;
border-radius: 3px;
cursor: pointer;
}
button:active {
background: #e5e5e5;
-webkit-box-shadow: inset 0px 0px 5px #c1c1c1;
-moz-box-shadow: inset 0px 0px 5px #c1c1c1;
box-shadow: inset 0px 0px 5px #c1c1c1;
outline: none;
}
<button>
Click me
</button>
Using the :focus pseudo class:
button {
background: #ededed;
border: 1px solid #ccc;
padding: 10px 30px;
border-radius: 3px;
cursor: pointer;
}
button:focus {
background: #e5e5e5;
outline: none;
-webkit-box-shadow: inset 0px 0px 5px #c1c1c1;
-moz-box-shadow: inset 0px 0px 5px #c1c1c1;
box-shadow: inset 0px 0px 5px #c1c1c1;
}
<button>
Click me
</button>
As an alternative to buttons, there is also a possibility to simply use checkbox with the pseudo-class :checked to toggle between states.
label.label-checkbox {
cursor: pointer;
}
label.label-checkbox input {
position: absolute;
top: 0;
left: 0;
visibility: hidden;
pointer-events: none;
}
label.label-checkbox span {
padding: 11px 21px;
border: 1px solid #ccc;
display: inline-block;
color: #202020;
border-radius: 6px;
margin: 7px;
background: #f5f5f5;
user-select: none;
}
label.label-checkbox input:checked + span {
box-shadow: inset 1px 2px 5px #777;
transform: translateY(1px);
background: #e5e5e5;
}
<h1>Pressed buttons with Checkbox</h1>
<label class="label-checkbox">
<input type="checkbox">
<span>Checkbox</span>
</label>
<label class="label-checkbox">
<input type="checkbox" checked>
<span>Styled</span>
</label>
<label class="label-checkbox">
<input type="checkbox">
<span>As</span>
</label>
<label class="label-checkbox">
<input type="checkbox" checked>
<span>Pressed</span>
</label>
<label class="label-checkbox">
<input type="checkbox">
<span>Buttons</span>
</label>
The best way is to nudge the button lower on the page. Using transformY would be the most straight-forward. However that can mess up the layout of other things in the page. So I think that it is better to use margin to temporarily lower the button, such as,
button {
background-color: white;
padding: 10px;
vertical-align: top;
box-shadow: 2px 1px 2px gray;
margin: 4px 10px 4px 10px;
}
button:active {
box-shadow: 0 0 0 white;
margin: 6px 10px 2px 10px;
}
<button>click me</button>
<button>click me</button>
<br>
<button>click me</button>
<button>click me</button>
As in the example, you can take away 2px from the bottom margin, and add 2px to the top margin, therefore you preserve the total size of the button.
You need vertical-align in case there are more than one button.
I think that the best way to make a button looks like it's pressed it's to make it a little darker.
button{
background-color: #03A9F4;
border: none;
padding: 15px 25px;
text-transform: uppercase;
color: white;
font-weight: 700;
border-radius: 3px;
}
button:hover, button:focus{
background-color: #0074a9;
outline: none;
}
<button>Button</button>
If you think visually about what happens when a push-button (like on an old-style stereo system) is pushed in, the button moves back. Visually, the face of the button is darker. The text on the button is inset. The border of the button is dark.
The other answers here all give part of the answer.
This visually does all of the above:
.btnPushed {
color: #efefef; //orig text color was #FFF
text-shadow: -1px -1px 0px #777, -1px -1px 0px #777;
box-shadow: inset 1px 1px 4px #222;
transform: translateY(1px); /* Add per Vince's helpful comment */
}
As you might notice, we apply the styling by adding a class.
$('button').click(function(){
$('button').removeClass('depressed');
$(this).addClass('depressed');
});
button {
border: 1px solid black;
border-radius: 3px;
color: #f5f5f5;
background-color: #b8860b;
background-image: linear-gradient(-180deg,#6699FF,#3473F5 90%);
cursor: pointer;
font-size: 14px;
line-height: 20px;
outline: none; /* Removes Chrome's blue outline */
margin: 2px;
}
button:active{
}
.depressed{
color: #efefef;
text-shadow: -1px -1px 0px #777, -1px -1px 0px #777;
box-shadow: inset 1px 1px 3px #222;
margin: 3px -1px -1px 3px; /* T R B L */
transform: translateY(1px);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<button>Button1</button>
<button>Button2</button>
<button class="depressed">Button3</button>
<button>Button4</button>
To avoid the adjustment (movement) of the other buttons due to the margin change, just put each button into a fix-size div. That way the buttons move around within their divs, without affecting the other buttons inside their own divs.
$('button').click(function(){
$('button').removeClass('depressed');
$(this).addClass('depressed');
});
div {
display: inline-block;
width: 65px;
height: 25px;
}
button {
border: 1px solid black;
border-radius: 3px;
color: #f5f5f5;
background-image: linear-gradient(-180deg,#6699FF,#3473F5 90%);
cursor: pointer;
font-size: 14px;
line-height: 20px;
outline: none; /* Removes Chrome's blue outline */
margin: 2px;
}
button:active{
}
.depressed{
color: #efefef;
text-shadow: -1px -1px 0px #777, -1px -1px 0px #777;
box-shadow: inset 1px 1px 3px #222;
margin: 3px -1px -1px 3px; /* T R B L */
transform: translateY(1px);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div><button>Button1</button></div>
<div><button>Button2</button></div>
<div><button class="depressed">Button3</button></div>
<div><button>Button4</button></div>
Update:
Added transform: translateY(1px), per Vince's helpful comment below.
.button{
color: white;
background-color: blue;
padding: 8px 25px;
border-radius : 7px;
}
.button:active {
box-shadow: 0 0 0 black;
margin: 3px 0 0 0 ;
}
<input type="button" class="button" value="Enter">
button{
background-color:grey;
padding:10px;
border:none;
color:white;
}
button:hover{
background-color:black;
color:white;
}
<button class"b1">button</button>
I am building a very simple form using this tutorial.
I need to control fields individually in CSS.
Right now if i mess with one field, the rest of the fields are affected as well.
How can i do that?
Form html:
<form name="contactform" class="contact_form" method="post" name="contact_form" action="send_form_email.php">
<ul>
<li>
<label for="name"></label>
<input type="text" placeholder="John Doe" required />
</li>
</ul>
<ul id="telephone">
<li>
<label for="telephone"></label>
<input type="text" placeholder="John Doe" required />
</li>
</ul>
</form>
Form CSS:
/* === Remove input autofocus webkit === */
*:focus {outline: none;}
/* === Form Typography === */
body {font: 14px/21px "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", sans-serif;}
.contact_form h2, .contact_form label {font-family:Georgia, Times, "Times New Roman", serif;}
.form_hint, .required_notification {font-size: 11px;}
/* === List Styles === */
.contact_form ul {
width:750px;
list-style-type:none;
list-style-position:outside;
margin:0px;
padding:0px;
}
.contact_form li{
padding: 12px;
border-bottom: 1px solid #eee;
position: relative;
margin-left: -180px;
margin-top: 20px;
}
.contact_form li:first-child, .contact_form li:last-child {
border-bottom:1px solid #777;
}
/* === Form Header === */
.contact_form h2 {
margin:0;
display: inline;
}
.required_notification {
color:#d45252;
margin:5px 0 0 0;
display:inline;
float:right;
}
/* === Form Elements === */
.contact_form label {
width:150px;
margin-top: 3px;
display:inline-block;
float:left;
padding:3px;
}
.contact_form input {
height: 20px;
width: 180px;
padding: 5px 8px;
}
.contact_form textarea {padding:8px; width:300px;}
.contact_form button {margin-left:156px;}
/* form element visual styles */
.contact_form input, .contact_form textarea {
border:1px solid #aaa;
box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;
border-radius:12px;
padding-right:30px;
-moz-transition: padding .25s;
-webkit-transition: padding .25s;
-o-transition: padding .25s;
transition: padding .25s;
}
.contact_form input:focus, .contact_form textarea:focus {
background: #fff;
border:1px solid #555;
box-shadow: 0 0 3px #aaa;
padding-right:70px;
}
/* === HTML5 validation styles === */
.contact_form input:required, .contact_form textarea:required {
background: #fff url(images/red_asterisk.png) no-repeat 98% center;
}
.contact_form input:required:valid, .contact_form textarea:required:valid {
background: #fff url(images/valid.png) no-repeat 98% center;
box-shadow: 0 0 5px #5cd053;
border-color: #28921f;
}
.contact_form input:focus:invalid, .contact_form textarea:focus:invalid {
background: #fff url(images/invalid.png) no-repeat 98% center;
box-shadow: 0 0 5px #d45252;
border-color: #b03535
}
/* === Form hints === */
.form_hint {
background: #d45252;
border-radius: 3px 3px 3px 3px;
color: white;
margin-left:8px;
padding: 1px 6px;
z-index: 999; /* hints stay above all other elements */
position: absolute; /* allows proper formatting if hint is two lines */
display: none;
}
.form_hint::before {
content: "\25C0";
color:#d45252;
position: absolute;
top:1px;
left:-6px;
}
.contact_form input:focus + .form_hint {display: inline;}
.contact_form input:required:valid + .form_hint {background: #28921f;}
.contact_form input:required:valid + .form_hint::before {color:#28921f;}
/* === Button Style === */
button.submit {
background-color: #68b12f;
background: -webkit-gradient(linear, left top, left bottom, from(#68b12f), to(#50911e));
background: -webkit-linear-gradient(top, #68b12f, #50911e);
background: -moz-linear-gradient(top, #68b12f, #50911e);
background: -ms-linear-gradient(top, #68b12f, #50911e);
background: -o-linear-gradient(top, #68b12f, #50911e);
background: linear-gradient(top, #68b12f, #50911e);
border: 1px solid #509111;
border-bottom: 1px solid #5b992b;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
box-shadow: inset 0 1px 0 0 #9fd574;
-webkit-box-shadow: 0 1px 0 0 #9fd574 inset ;
-moz-box-shadow: 0 1px 0 0 #9fd574 inset;
-ms-box-shadow: 0 1px 0 0 #9fd574 inset;
-o-box-shadow: 0 1px 0 0 #9fd574 inset;
color: white;
font-weight: bold;
padding: 6px 20px;
text-align: center;
text-shadow: 0 -1px 0 #396715;
}
button.submit:hover {
opacity:.85;
cursor: pointer;
}
button.submit:active {
border: 1px solid #20911e;
box-shadow: 0 0 10px 5px #356b0b inset;
-webkit-box-shadow:0 0 10px 5px #356b0b inset ;
-moz-box-shadow: 0 0 10px 5px #356b0b inset;
-ms-box-shadow: 0 0 10px 5px #356b0b inset;
-o-box-shadow: 0 0 10px 5px #356b0b inset;
}
Add a class name to your input tag, so instead of selecting:
.contact_form input {...}
you could do:
.contact_form input.telephone {...}
and your html would look like this:
<input type="text" class="telephone" placeholder="John Doe" required />
One way:
Give each field you want to control a unique id:
<input id="input1" />
Then in your css, address it like so:
#input1
{
style: value;
}
Your input tags will probably end up with name attributes:
<input type="text" name="telephone">
So you can reference them like so:
input[name=telephone] { ...
Both of the answers already here would work. You can specifically select any HTML element to style in CSS with IDs or Classes. However, the two are very different things. Read up on the difference here.
HTML:
<input id="myUniqueID" class="myClass" />
<input id="myOtherID" class="myClass" />
CSS:
input { color: black; background: white; }
input#myUniqueID { color: red; }
input.myClass { background: blue; }
Output:
You have two input elements and you have globally styled them with black text and white backgrounds. However, you have also given them IDs and Classes to help them stand out. IDs must be unique, so there can only be one of them. With this CSS, the first element will therefor have red text while the second will still have black text. Even though it is given a separate ID, it isn't used for anything and that's okay. Classes can select multiple elements, so both of the inputs will have blue backgrounds rather than white ones.
I've got a container that has a contact form in it.. the form is ignoring my width of 140px and somehow computing itself out to 300px. no idea where it's coming from.
HTML:
<div id="main" role="main">
<div id="mail">
<form id="signup" action="<?=$_SERVER['PHP_SELF']; ?>" method="get">
<fieldset>
<span id="response">
<? require_once('php/store-address.php'); if($_GET['submit']){ echo storeAddress(); } ?>
</span>
<input type="email" name="email" id="email" placeholder="Enter your email address" />
<input type="submit" id="submit" class="btn" value="Go" />
</fieldset>
</form>
</div>
</div>
CSS:
#main {
width:300px;
height:110px;
padding:10px 20px 10px 20px;
position:absolute;
bottom:50px;
left:50%;
margin-left:-170px;
background-color: #f0f3f8;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f0f3f8), to(#a9a9ad));
background: -moz-linear-gradient(100% 100% 90deg, #a9a9ad, #f0f3f8);
background: -o-linear-gradient(#f0f3f8, #a9a9ad);
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
//text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
//border-bottom: 1px solid rgba(0,0,0,0.25);
box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
////////CONTACT FORM
#mail {
width:140px;
height:95px;
float:right;
display:block;
/*background: #c9d0de; border: 1px solid #e1e1e1;
-moz-box-shadow: 0px 0px 8px #444;
-webkit-box-shadow: 0px 0px 8px #444;*/
}
#response {
width:140px;
height:25px;
margin-bottom:10px;
display:block;
font-style:italic;
}
input {
width: 124px;
height: 9px;
padding: 8px;
margin: 0 0 10px 0;
background: #5E768D;
background: -moz-linear-gradient(top, #546A7F 0%, #5E768D 20%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#546A7F), color-stop(20%,#5E768D));
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-moz-box-shadow: 0px 1px 0px #f2f2f2;
-webkit-box-shadow: 0px 1px 0px #f2f2f2;
font-family: sans-serif;
font-size: 10px;
color: #f2f2f2;
text-shadow: 0px -1px 0px #334f71;
outline:none;
}
input::-webkit-input-placeholder {
color: #a1b2c3; text-shadow: 0px -1px 0px #38506b;
}
input:-moz-placeholder {
color: #a1b2c3; text-shadow: 0px -1px 0px #38506b;
}
input:focus, textarea:focus {
background: #728eaa;
background: -moz-linear-gradient(top, #668099 0%, #728eaa 20%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#668099), color-stop(20%,#728eaa));
}
input[type=submit] {
width: 40px;
height: 25px;
padding:5px;
margin: 0 auto;
display:block;
-moz-box-shadow: 0px 0px 5px #999;-webkit-box-shadow: 0px 0px 5px #999;
border: 1px solid #556f8c;
background: -moz-linear-gradient(top, #718DA9 0%, #415D79 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#718DA9), color-stop(100%,#415D79));
cursor: pointer;
}
JSFiddle link
You can't have comments with //. Only multi-line comments work with css. You'll have to remove this comment:
////////CONTACT FORM
The rest of your styles should work after you remove that.