<style type="text/css">
.style-11 input[type="text"] {
	padding: 10px;
	transition: border 0.3s;
	color: #000;
	background-color: #CCC;
	border-bottom-width: 2px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: solid;
	border-left-style: none;
	border-bottom-color: #333333;
}
.style-11 input[type="text"]:focus,
.style-11 input[type="text"].focus {
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #FFFF00;
}
</style>


<form id="form1" class="style-11" name="form1" method="post" action="">
  <input type="text" name="uline" id="uline" />
</form>

http://abf24.net/testdrive/css.html

Text input Field with Bottom Border only. Border color change at focus

css border bottom on Text input

css

CSS