Change the color of an active input box

This tutoril will show how to change the color of an input box or textarea when they are active. This is very simple and is done using CSS.

Related Tutorials

Spice up Your Input Boxes
Customize your input boxes by adding a simple bit of style code to your input box tag. Change its boarder look, weight and colour. A nice change to the standard look.

Changing Text Font and Color in HTML Editor
To increase impression of your future web site based on our web design templates maybe you will need to change text color or font style. There are some ways of doing that.If you want to change part of text or some words do the following. Select text, witch properties you want to modify.

Background Color
CSS background colors work very similar to the bgcolor command in html. When applied within the <body> tag it will color the entire page in that color. This may seem redundant to the bgcolor tag, however since the bgcolor tag is typically applied to each page and CSS are usually linked throughout a site, you can easily in one place, change the backgrounds to many pages similar.

Links and Styles
Modify link states, add background color, change cursor on mouseOver...etc

Web Color Basics (A Detailed Guide)
Now let me introduce you to the basics of color also known as colour. Why you ask because most web designers want to know how to add color to their web page or their entire site. Now in HTML and XHTML you have two options for displaying color, which include named colors and hexadecimal codes.

Hexadecimal Color Notation On The Web
When designing elements for your webpage, you will often be called upon to specify a color. For example, the code for a span shown below specifies that the color of the text within the span will be yellow.

Basic CSS With Text Formating
You Will Learn How To Change A Background Color And How To Format Text In A HTML Document Also We Will Find Out How.

Changing Table Background on MouseOver
This tutorial will teach you how to make a menu like tables that will change background color when you mouseOver.

Hex Chart
When adding a color to your webpage with HTML, sometimes you can just type in the name of the color. But more often than not, you'll need to use what's called the hex code, which is something that the browser will be able to understand. Choose a color from the list below and look to its left to get the hex code.

Image in Input fields for form
You can spice up a login form with images inside the input fields. Include icons inside the login form and show what is supposed to be inside the fields.

How to Add Google Custom Search Box in Navigation Menu
We all know navigation of a website gives more impression to the readers. Most of the people want important things like search box, categories in navigation. In this tutorial I am going to explain how to add google custom search box in navigation bar.

Content Box
Learn to code and style a content box using HTML and CSS!

Custom Link Colors
Standard link colors are boring and frequently do not match the color scheme of your website. Pseduo-classes, which add different effects to some selectors, can change the link colors to match your site.

CSS Box Model differences in Firefox and Internet Explorer
This describes all elements used in HTML documents. Every element is in the shape of a rectangle (and you wonder why developers cringe when circles are a part of layouts?) A box has several attributes to it, such as width, height, padding, margin, and border.

CSS Menu Style 2
Grasp the wonderful capabilities of CSS creating a simple menu box. The continuation of this tutorial features modified versions of the same box, more challenging but beautiful.

Scrollbar Color
Adding color to your webpage scrollbar adds a little flavor to your page. It also gives you the power to match the scrollbar with your website's design colors!

Vertical Divider Menu
One of the most popular CSS menu interfaces around, this is a horizontal CSS menu that uses an indented vertical divider to separate each menu item. Each item can change background color when the mouse moves over it.

Cursors
To change the cursor on an individual link, copy the code below, and change LINK TEXT to the text you want to use for your link, and change YOUR URL to the url you are linking to.

Box Outlines and Borders
This tutorial will describes how to set box outlines and borders.

Links and Styles
As you know there are four states of a link, namely: Initial State, Visited State, Mouse Over State and Active State

Style mouse pointer
Change the mouse point into a waiting glass over a link or speical arrows for some reason. You can also change the cursor with any image you want.

Link control
The anchor tag is responsible for links. We can set specific values for the anchor. These values will be for the link, active and visited. We can also have a hover property in styles.

Change cursor
Change a user's cursor when they hover over a link.

Basic CSS Beginners
Using CSS, you can change the appearance of all of you pages by editing only one document! No more <font> tags everywhere! You can even define the position of boxes. (divs and spans) Learn the 3 ways that you can use stylesheets to change the appearance of elements.

CSS - Cascading Style Sheet
CSS is a simple file which controls the visual appearance of a Web page without compromising its structure. Using CSS we can control our font size, font color, link color and many other attributes on our web page. This will make our HTML code much more readable and the page size will be reduced.

Styling Form Elements
How to style form elements in the way that you want them. Adding classes to each input field gives your contact form a new look with CSS.

Shade Image Tabs Menu
This is an attractive "blue shading" image tab menu. The shade effect is created using two gradient background images, one for the overall tabs, and the other, for the currently "active" tab.

Scroll Bar Colors
Put color in that scrollbar.

Coloring the scrollbar
How can I color the scroll bar of my Web page.

Different link colors
Do you want to have a different color links on different sections of your website? If your answer is yes then you have come to the right tutorial.

Colored Scroll Bars
Easily color your browser's scrollbar using CSS.

Table-less Forms
How to make a form with out using tables. If your a CSS freak like me you might have your own way of creating table-less structures, one of my favorites is creating table-less forms. In my example, I created a contact form which you will notice the name text floats to the left and the input field floats to the right.

Ways of Enhancing the HR Tag
Make your pages load quicker, and more cross browser compatible by using CSS to define your HR tags. Control there color, size weight, possition and more.

CSS and Cursors
With CSS you can change what the cursor looks like when it hovers over your links and other elements.

Opacity
Learn how to change the opacity of an object by default or on rollover using CSS.

Beautiful Photoshop-like Buttons with CSS3
In this Tutorial we'll show you how to recreate 3 different, slick buttons that we created beforehand in Photoshop without the usage of any image in CSS3. Well use a multitude of CSS3 properties, such as font face, text and box shadow, gradients and border radius .

Rounded corners box simple effect with photoshop
In this post I will show how to create rounded corners using background images created in Photoshop, one for each corner. This technique is very simple and is working in all the browsers.

Mouse Cursors
How to use CSS to change the mouse cursor in different ways.

DD Color Tabs
This is a lightweight, very easy to customize image tabs menu similar to the one you see throughout Dynamic Drive. Instead of swapping between two tab images, this menu uses a unified transparent tab instead.

CSS and Spacing
All block-level HTML elements can be given margins and padding properties so that they are spaced out exactly as you want them to be. We'll also see how to change the display-type of an element through CSS.

Change the color of an active input box

View Tutorial