15th February 2012

CSS - Glow-on-focus input form fields

input[type=text]{
	padding:6px;font-size:18px; 
	border:2px solid #ccc;
	background: white;
	padding: 5px;
	width:280px;
	margin-bottom: 10px;
	border-radius: 4px;
	-webkit-transition: 0.5s ease-in-out all;
	-moz-transition: 0.5s ease-in-out all;
	-ms-transition: 0.5s ease-in-out all;
	-o-transition: 0.5s ease-in-out all;
	transition: 0.5s ease-in-out all;
}
input[type=text]:focus{
	border-color:white;
	-moz-box-shadow: 0px 0px 14px #dfdfdf;
	-webkit-box-shadow: 0px 0px 14px #dfdfdf;
	box-shadow: 0px 0px 14px #dfdfdf;
}

These CSS declarations allow you to create text fields that have a ( Twitter-Bootstap like ) glow effect when they are focused on.

Reply:

Taken from the Twttr. Bootstrap css:

input.focus{
	border-color: rgba(82, 168, 236, 0.8); 
	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); 
	-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
	outline: 0;	
	outline: thin dotted 9;
}

March 8, 2012, 1:04 pm
Reply