I want to create some decent inputs for my form, and I would really like to know how TWITTER does their glowing border around their inputs.
Example/Picture of the Twitter border:

I also don't quite know how to create the rounded corners.
|
|
Here you go:
Live demo: http://jsfiddle.net/simevidas/CXUpm/1/show/ (to view the code for the demo, remove "show/" from the URL) |
|||||||||||||||||||||
|
|
How about something like this... http://jsfiddle.net/UnsungHero97/Qwpq4/1207/
CSS
|
|||||||||
|
|
Use a normal blue |
|||||
|
|
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/ . |
||||
|
|
|
I combined two of the previous answers (jsfiddle).
|
||||
|
|
|
|||
|
|
|
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 |
|||||
|
|
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:
If you are not using LESS then here's the compiled version:
|
|||
|
|
|
This will create glowing input fields and textareas:
|
|||
|
|
|
Modified version with little less glowing version.
|
|||
|
|