$('.form-fild input,.form-fild textarea').focus(function() {_x000D_
$(this).parent().addClass('open');_x000D_
});_x000D_
_x000D_
$('.form-fild input,.form-fild textarea').blur(function() {_x000D_
$(this).parent().removeClass('open');_x000D_
});
_x000D_
.open {_x000D_
color:red; _x000D_
}_x000D_
.form-fild {_x000D_
position: relative;_x000D_
margin: 30px 0;_x000D_
}_x000D_
.form-fild label {_x000D_
position: absolute;_x000D_
top: 5px;_x000D_
left: 10px;_x000D_
padding:5px;_x000D_
}_x000D_
_x000D_
.form-fild.open label {_x000D_
top: -25px;_x000D_
left: 10px;_x000D_
/*background: #ffffff;*/_x000D_
}_x000D_
.form-fild input[type="text"] {_x000D_
padding-left: 80px;_x000D_
}_x000D_
.form-fild textarea {_x000D_
padding-left: 80px;_x000D_
}_x000D_
.form-fild.open textarea, _x000D_
.form-fild.open input[type="text"] {_x000D_
padding-left: 10px;_x000D_
}_x000D_
textarea,_x000D_
input[type="text"] {_x000D_
padding: 10px;_x000D_
width: 100%;_x000D_
}_x000D_
textarea,_x000D_
input,_x000D_
.form-fild.open label,_x000D_
.form-fild label {_x000D_
-webkit-transition: all 0.2s ease-in-out;_x000D_
-moz-transition: all 0.2s ease-in-out;_x000D_
-o-transition: all 0.2s ease-in-out;_x000D_
transition: all 0.2s ease-in-out;_x000D_
}
_x000D_
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<div class="container">_x000D_
<div class="row">_x000D_
<form>_x000D_
<div class="form-fild">_x000D_
<label>Name :</label>_x000D_
<input type="text">_x000D_
</div>_x000D_
<div class="form-fild">_x000D_
<label>Email :</label>_x000D_
<input type="text">_x000D_
</div>_x000D_
<div class="form-fild">_x000D_
<label>Number :</label>_x000D_
<input type="text">_x000D_
</div>_x000D_
<div class="form-fild">_x000D_
<label>Message :</label>_x000D_
<textarea cols="10" rows="5"></textarea>_x000D_
</div>_x000D_
</form>_x000D_
</div>_x000D_
</div>
_x000D_
input[type="text"]{
@include transition(all 0.30s ease-in-out);
outline: none;
padding: 3px 0px 3px 3px;
margin: 5px 1px 3px 0px;
border: 1px solid #DDDDDD;
}
input[type="text"]:focus{
@include box-shadow(0 0 5px rgba(81, 203, 238, 1));
-webkit-box-shadow: 0px 0px 5px #007eff;
-moz-box-shadow: 0px 0px 5px #007eff;
box-shadow: 0px 0px 5px #007eff;
}
I combined two of the previous answers (jsfiddle).
input {
/* round the corners */
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}
input:focus {
outline:none;
border: 1px solid #4195fc;
/* create a BIG glow */
box-shadow: 0px 0px 14px #4195fc;
-moz-box-shadow: 0px 0px 14px #4195fc;
-webkit-box-shadow: 0px 0px 14px #4195fc;
}?
SLaks hit the nail on the head but you might want to look over the changes for inputs in CSS3 in general. Rounded corners and box-shadow are both new features in CSS3 and will let you do exactly what you're looking for. One of my personal favorite links for CSS3/HTML5 is http://diveintohtml5.ep.io/ .
Use a normal blue border
, a medium border-radius
, and a blue box-shadow
with position 0 0
.
Modified version with little less glowing version.
input {
/* round the corners */
//background-color: transparent;
border: 1px solid;
height: 20px;
width: 160px;
color: #CCC;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}
input:focus {
outline:none;
border: 1px solid #4195fc;
/* create a BIG glow */
box-shadow: 0px 0px 5px #4195fc;
-moz-box-shadow: 0px 0px 5px #4195fc;
-webkit-box-shadow: 0px 0px 5px #4195fc;
}
How about something like this... http://jsfiddle.net/UnsungHero97/Qwpq4/1207/
CSS
input {
border: 1px solid #4195fc; /* some kind of blue border */
/* other CSS styles */
/* round the corners */
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
/* make it glow! */
-webkit-box-shadow: 0px 0px 4px #4195fc;
-moz-box-shadow: 0px 0px 4px #4195fc;
box-shadow: 0px 0px 4px #4195fc; /* some variation of blue for the shadow */
}
Below is the code that Bootstrap uses. Colors are bit different but the concept is same. This is if you are using LESS to compile CSS:
// Form control focus state
//
// Generate a customized focus state and for any input with the specified color,
// which defaults to the `@input-focus-border` variable.
//
// We highly encourage you to not customize the default value, but instead use
// this to tweak colors on an as-needed basis. This aesthetic change is based on
// WebKit's default styles, but applicable to a wider range of browsers. Its
// usability and accessibility should be taken into account with any change.
//
// Example usage: change the default blue border and shadow to white for better
// contrast against a dark gray background.
.form-control-focus(@color: @input-border-focus) {
@color-rgba: rgba(red(@color), green(@color), blue(@color), .6);
&:focus {
border-color: @color;
outline: 0;
.box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @{color-rgba}");
}
}
If you are not using LESS then here's the compiled version:
.form-control:focus {
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}
You better use Twitter Bootstrap which contains all of this nice stuff inside. Particularly here is exactly what you want.
In addition, you can use different themes built for Twitter Bootstrap from this website
This will create glowing input fields and textareas:
textarea,textarea:focus,input,input:focus{
transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
border: 1px solid #c4c4c4;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
box-shadow: 0px 0px 8px #d9d9d9;
-moz-box-shadow: 0px 0px 8px #d9d9d9;
-webkit-box-shadow: 0px 0px 8px #d9d9d9;
}
input:focus,textarea:focus {
outline: none;
border: 1px solid #7bc1f7;
box-shadow: 0px 0px 8px #7bc1f7;
-moz-box-shadow: 0px 0px 8px #7bc1f7;
-webkit-box-shadow: 0px 0px 8px #7bc1f7;
}
Source: Stackoverflow.com