Change textbox border when focus in

   
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Aqueous</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<style rel="stylesheet" type="text/css">

body {
  font: 78.5%/1.6em "Lucida Grande", "Lucida Sans Unicode", verdana, geneva, sans-serif;
  word-spacing:2px;
  color:#444;
  margin:20px;
  background:url(aqueous-images//body.jpg) #f6f6f6;
}

* {
  margin:0;
  padding:0;
  
}

#wrapper {
  background:#fff;
  border:3px solid #f1f1f1;
  max-width:1200px;
  width:expression(this.width > 320 ? "320px" : this.width);
  min-width:760px;
  margin:0 auto;
}

* html #wrapper
{
  w\idth: expression(document.documentElement.clientWidth > 1200 ? "1200px" : "auto");
}

#innerwrapper {
  margin:1px;
  background:url(aqueous-images//innerwrapper.jpg) top repeat-x;
  padding:20px;
}

#header input {
  width:150px;
  padding:5px;
  background:#fff;
  border:2px solid #f6f6f6;
  font:150% Arial;
  color:#999;
}

#header input:hover {
  border:2px solid #ccc;
}

#header input:focus {
  border:2px solid #79B5D6;
  color:#555;
}

#header form {
  padding:27px 25px 20px 25px;
  float:right;
  background:#fff;
  width:160px;
  margin:-20px -20px 0 0 !important;
  margin:-20px -10px 0 0;
  border:none;
}

#header h1 {
  float:left;
  font:250% Arial;
  color:#333;
  padding:5px 20px 5px 5px;
  border-right:1px solid #ccc;
  margin:0 20px 0 0;
}

#header h1 a {
  color:#333;
  text-decoration:none;
  border-bottom:2px solid #f6f6f6;
}

#header h1 a:hover {
  color:#111;
  border-bottom:2px solid #79B5D6;
}

#header h2 {
  font:150% Arial;
  color:#666;
  padding:16px 0 0 0;
  border:none;
}

#header h2 a {
  color:#444;
  text-decoration:none;
  border-bottom:2px solid #f6f6f6;
}

#header h2 a:hover {
  border-bottom:2px solid #79B5D6;
}

#header #nav {
  clear:both;
  background:url(aqueous-images//nav.jpg) top repeat-x #4F9EC9;
  border-bottom:2px solid #4F9EC9;
  border-top:2px solid #388CBA;
  border-left:2px solid #388CBA;
  border-right:2px solid #388CBA;
  padding:10px 10px 10px 0 !important;
  padding:4px 10px 10px 0;
}

#header a em {
  font-style:normal;
  text-decoration:underline;
}

#header #nav a {
  color:#fff;
  font:140% Trebuchet MS;
  text-decoration:none;
  padding:10px;
}

#header #nav a:hover {
  background:#4F9EC9;
}

#header #nav a.active {
  background:#4F9EC9;
}

#header #nav li {
  display:inline;
  list-style:none;
  margin:0 1px 0 0;
}

#header #subnav {
  background:#4F9EC9;
  padding:5px 7px 7px 7px;
  font:90% Verdana;
  color:#DEEDF5;
  border-bottom:2px solid #388CBA;
  border-left:2px solid #388CBA;
  border-right:2px solid #388CBA;
}

#header #subnav li {
  list-style:none;
  display:inline;
}

#header #subnav a {
  color:#DEEDF5;
  text-decoration:none;
  font:100% Verdana;
  padding:5px;
  border-bottom:2px solid #4F9EC9;
}

#header #subnav a:hover {
  border-bottom:2px solid #388CBA;
  color:#fff;
}

#header #subnav a.active {
  border-bottom:2px solid #388CBA;
  color:#fff;
}


#sidebar {
  background:#333;
  width:200px;
  padding:10px 20px 20px 20px;
  float:left;
  color:#666;
  border-top:2px solid #000;
  border-bottom:10px solid #000;
}

#sidebar h2 {
  font:160% Arial;
  color:#999;
  margin:10px 0 10px 0;
  background:url(aqueous-images//sidebarh2.jpg) right no-repeat;
  border:none;
}

#sidebar h3 {
  color:#FF8040;
  font:90% Verdana;
  font-weight:bold;
  letter-spacing:2px;
}

#sidebar p {
  margin:15px 0;
}

#sidebar p.news {
  background:#323232;
}

#sidebar p.news a.more {
  color:#ccc;
  display:block;
  text-align:right;
  font:80% Verdana;
  text-transform:uppercase;
  letter-spacing:1px;
  text-decoration:none;
  padding:10px 0;
}

#sidebar p.news a:hover {
  color:#98D158;
}

#sidebar .subnav {
  border-top:1px solid #2C2C2C;
}

#sidebar .subnav li {
  list-style:none;
  padding:5px;
  border-bottom:1px solid #2C2C2C;
}

#sidebar .subnav li a {  
  color:#ccc;
  text-decoration:none;
  display:block;
}

#sidebar .subnav li a:hover {
  color:#98D158;
}

#sidebar .subnav li a b {
  float:right;
  display:none;
  color:#666;
}

#sidebar .subnav li a:hover b {
  display:inline;
}

#sidebar input {
  padding:4px;
  background:#2c2c2c;
  border:1px solid #222222;
  color:#ccc;
  font:90% Verdana;
  width:190px;
}

#sidebarright {
  width:170px;
  float:right;
  padding:10px 0 0 20px;
  background:url(aqueous-images//sidebarright.jpg) top left no-repeat;
}

#sidebarright p {
  font:90% Verdana;
  color:#777;
  line-height:20px;
  margin:10px 0;
}

#sidebarright h2 {
  font:140% Arial;
  color:#333;
  margin:10px 0;
  border:none;
}

#sidebarright ul {
  margin:10px 0 10px 15px;
  font:90% Verdana;
}

#sidebarright ul li {
  margin:5px 0;
}

#sidebarright a {
  border-bottom:1px dotted #eee;
  color:#444;
  text-decoration:none;
}

#sidebarright a:hover {
  border-bottom:1px solid #ccc;
}


#content {
  margin:0 210px 0 240px;
  background:url(aqueous-images//content.jpg) top left no-repeat;
  padding:20px 0 0 20px;
}

#contentnorightbar {
  margin:0 0 0 240px;
  background:url(aqueous-images//content.jpg) top left no-repeat;
  padding:20px 0 0 20px;
}

p {
  margin:15px 0;
  line-height:22px;
}

h2 {
  font:190% Arial;
  color:#79B933;
  border-bottom:2px solid #f6f6f6;
}

h2 a {
  color:#79B933;
  text-decoration:none;
}

h2 a:hover {
  color:#5F9128;
}


#footer {
  clear:both;
  border-top:1px solid #eee;
  padding:10px;
  margin:30px 0 0;
}

a {
  color:#222;
}

a:hover {
  text-decoration:none;
}

h3 {
  font:140% Trebuchet MS;
  margin:10px 0;
}

#content ul {
  margin:15px 0 15px 0;
  line-height:25px;
  padding:15px 0 15px 15px;
  border-top:1px solid #eee;
  border-bottom:1px solid #eee;
  color:#79B933;
}
#content ul span {
  color:#444;
}
#contentnorightbar ul {
  margin:15px 0 15px 20px;
  line-height:25px;
  padding:15px 0;
  border-top:1px solid #eee;
  border-bottom:1px solid #eee;
  color:#79B933;
}
#contentnorightbar ul span {
  color:#444;
}

img {
  padding:1px;
  background:#ccc;
  border:4px solid #f6f6f6;
}

form {
  padding:10px;
  border:1px solid #f6f6f6;
}

label {
  display:block;
  font-weight:bold;
  color:#444;
  margin:5px 0;

}
input {
  width:300px;
  padding:4px;
  border:none;
  border-bottom:1px dotted #ccc;
  font:90% Verdana;
  color:#777;
}

textarea {
  width:400px;
  padding:4px;
  font:90% Verdana;
  border:1px solid #eee;
  height:200px;
  display:block;
  color:#777;
}

p img {
  float:left;
  margin:0 10px 0 0;
}

blockquote p {
  font:160% Georgia;
  color:#aaa;
  padding:0 10% 0 0;
  line-height:30px;
}

</style>

</head>
<body>
<div id="wrapper">
  <div id="innerwrapper">
    <div id="header">
      <form action="">
        <input value="Search" />
      </form>
      <h1><a href="">Aqueous</a></h1>
      <h2> A liquid layout by Six Shooter Media</h2>
      <ul id="nav">
        <li><a href="" accesskey="3" class="active"><em>3</em> Columns</a></li>
        <li><a href="twocolumns.html" accesskey="2"><em>2</em> Columns</a></li>
        <li><a href=""><em>H</em>ome</a></li>
        <li><a href=""><em>A</em>bout</a></li>
        <li><a href=""><em>E</em>xamples</a></li>
        <li><a href=""><em>C</em>ontact</a></li>
      </ul>
      <ul id="subnav">
        <li>Subnav:</li>
        <li><a href="" accesskey="3" class="active"><em>3</em> Columns</a></li>
        <li><a href="twocolumns.html" accesskey="2"><em>2</em> Columns</a></li>
        <li><a href=""><em>H</em>ome</a></li>
        <li><a href=""><em>A</em>bout</a></li>
        <li><a href=""><em>E</em>xamples</a></li>
        <li><a href=""><em>C</em>ontact</a></li>
      </ul>
    </div>
    <div id="sidebar">
      <h2>Latest News</h2>
      <h3>News Title</h3>
      <p class="news"> An example of a "latest news" type text area. Here would be the excerpt of the article. You can of course put anything you like here. <a href="" class="more">Read More &raquo;</a> </p>
      <h3>News Title</h3>
      <p class="news"> An example of a "latest news" type text area. Here would be the excerpt of the article. You can of course put anything you like here. <a href="" class="more">Read More &raquo;</a> </p>
      <h3>News Title</h3>
      <p class="news"> An example of a "latest news" type text area. Here would be the excerpt of the article. You can of course put anything you like here. <a href="" class="more">Read More &raquo;</a> </p>
      <h2>Sub Navigation</h2>
      <ul class="subnav">
        <li><a href=""><b>&raquo;</b>Link Here</a></li>
        <li><a href=""><b>&raquo;</b>Link Here</a></li>
        <li><a href=""><b>&raquo;</b>Link Here</a></li>
        <li><a href=""><b>&raquo;</b>Link Here</a></li>
      </ul>
      <h2>Search</h2>
      <input name="" type="text" value="Search" />
    </div>
    <div id="sidebarright">
      <h2>Another Sidebar</h2>
      <p> Sure, why not?! With all this width we have room for an additional sidebar if you should so need one. </p>
      <p> Of course, if you happen to not want this additional sidebar, a standard 2 column layout is available which you can view by <a href="twocolumns.html">clicking here</a>! </p>
      <h2>More Links</h2>
      <ul>
        <li>Six Shooter Media</li>
        <li><a href="">free templates</a></li>
        <li><a href="">Buy a Button</a></li>
        <li><a href="">Transfer Speculation</a></li>
      </ul>
    </div>
    <div id="content">
      <h2 id="Intro"><a href="">Introduction</a></h2>
      <p> Hello and welcome to Aqueous, a liquid template created by Six Shooter Media. The template itself is designed for higher resolutions, 1024x768 and up, however with it being liquid, it will work in any resolution you can throw at it. It's written in XHTML and CSS and displays consistently on various web browsers. </p>
      <h2 id="About"><a href="">About the Author</a></h2>
      <p>Hi! My names Jay and I'm a 20 year old web designer from England. My main projects are conducted through my website Six Shooter Media, but I (obviously) also enjoy creating Open Source web templates for general use! You can keep a check on my free templates here which is probably a link worth bookmarking as my templates appear there a couple of weeks before OWD/OSWD due to the design queues. </p>
      <p> Another site of mine that you might find interesting if you're setting up a site with a free template like Buy a Button.net. There, for a great price you can purchase a link to your site in the form of a button. This link will obviously provide you site with some additional traffic which is always nice! </p>
      <p> If you want more of my free templates, they can be found here! </p>
      <h2 id="Examples"><a href="">Some Examples</a></h2>
      <p> OK, here I'll just put some example html elements that you will most probably be using in your blog. </p>
      <h3>Blockquote Example</h3>
      <blockquote>
        <p> Here's your blockquote text jfds jkndskf ndsknf sldnfjk sdnf jdsbf hdsbf jbsdjfk bdskj bdsjfb dsk bds bfsdj bfsjk bfsjdbf sbjd fjsbdk fsdbf sdb fksbd sb </p>
      </blockquote>
      <h3>List Example</h3>
      <ul>
        <li><span>Here</span></li>
        <li><span>Is our friend</span></li>
        <li><span>The list!</span></li>
      </ul>
      <h2 id="Contact"><a href="">Contact</a></h2>
      <p> If you decide to use this template please drop me a line to let me know! Don't hesitiate to get in touch if your interested in a custom template or just in any of my services in general. I look forward to hearing from you! </p>
      <h3>Example Contact Form</h3>
      <form action="">
        <label>Name</label>
        <input value="Your Name" />
        <label>Email</label>
        <input value="Your Email" />
        <label>You Comments</label>
        <textarea rows="5" cols="5"></textarea>
        <input type="submit" />
      </form>
    </div>
    <div id="footer">
      <p>Template design by <a href="http://www.sixshootermedia.com">Six Shooter Media</a>.<br />
         All your copyright information here.</p>
    </div>
  </div>
</div>
</body>
</html>

Related examples in the same category

1.	'input' Example
2.	input with class name
3.	Set margin for input control
4.	Set width of input control
5.	Set input background color and color
6.	Set width and display style for input
7.	Set all input control for margin, left float, width and display style
8.	Set input control with focus to have yellow background
9.	Set required label field to have bold font and highlight color
10.	Set border width, border style and border color for all input controls
11.	Set width and margin for all input controls
12.	Set background color, font and border for form control
13.	Tabbing Order with tabindex
14.	Access Keys
15.	input display: block;
16.	input margin-bottom: 1.25em;
17.	input width: 150px;
18.	input border: 1px solid black;
19.	input border-right: 2px solid black;
20.	input border-bottom: 2px solid black;
21.	Required field
22.	Register for our e-mail
23.	Login form
24.	input class id selector and property selector
25.	input width: 12em
26.	input margin: 0 0 .5em 0;
27.	Attribute Value Selectors for input controls
28.	input padding:2px;
29.	input border:1px solid #eee;
30.	input font: normal 1em Verdana, sans-serif;
31.	input color:#777;
32.	input padding: 2px;
33.	input border: 1px solid #EFEFEF;
34.	input font: normal 1em Verdana, 'Trebuchet MS', Tahoma, sans-serif;
35.	input color: #666666;
36.	input:focus background-color:#ffffcc;
37.	input:focus border-width:3px;
38.	input:focus border-color:#ff0000;
39.	input background: blue;
40.	input color: white;
41.	input border: 3px solid royalblue;
42.	Input border: 2px inset #CECECE;
43.	Input height: 17px;
44.	Input float: left;
45.	Input margin: 8px 0 0 7px;
46.	Input padding: 0 0 0 5px;
47.	Input font-size: 12px;
48.	Input color: #454545
49.	Input height: 20px;
50.	Input width: 329px;
51.	Input border-top: 1px solid #700303;
52.	Input border-left: 1px solid #700303;
53.	Input border-bottom: 0px;
54.	Input border-right: 0px;
55.	Input margin: 0 5px 0 11px;
56.	Input padding: 2px 0 0 2;
57.	Input background-color: red
58.	input border: 1pt solid #6A849D;
59.	input font: normal 10px tahoma;
60.	input color: #707070;
61.	input margin: 0px 0px 5px 0px;
62.	input color: lightblue;
63.	input border: 3px solid lightblue;
64.	A simple form with input elements
65.	An input form that calls a form-to-email Cgi script
66.	input color: #fcc; background-color: #900; font-size: 1.5em; border: 1px solid #660; padding: 4px;
67.	input margin-bottom: 1.5em; width: 50%; color: #666; background-color: #ccc;
68.	Using border to highlight input
69.	input color: #00008B;background-color: #ADD8E6;border: 1px outset #00008B;
70.	input color: #00008B;background-color: #E3F2F7;border: 1px inset #00008B;width: 200px;
71.	input:focus border: 2px solid #000000;
72.	input:focus background-color:#ffffcc; border-width:3px;border-color:#ff0000;
73.	Single line text input control
74.	Multi line text input control
75.	input:focus background-color:#c4c4c4;
76.	input background-color:#cccccc;
77.	input for email
78.	File input
79.	Image input
80.	Hidden Input Example
81.	Message Input form
82.	File Upload Test
83.	A prepopulated text field with a maximum length
84.	'alt': an alternate description
85.	'disabled' sets the enabled state of an element
86.	'vcard_name' sets the element vCard value to use with the autocomplete list provided by the browser

Change textbox border when focus in : input « Form « HTML / CSS

Related examples in the same category