Input Box Background Color CSS
You can use CSS (Cascading Style Sheets) Style Tags to add a color background to your form input boxes.
The INPUT tag is used to create input fields within a web page form.
You can change the font, input text color, input text size and the background color of your INPUT box by using the style attribute.
- HTML Code
- HTML code viewed within an HTML document:
<form>
<input type="text" style="color: #c0c0c0; font-family: Verdana; font-weight: bold; font-size: 12px; background-color: #404040;" size="10" maxlength="30">
</form> - Browser View
- HTML coding viewed through a web browser:
Click inside this text box and type to see an example of the text color.
- HTML Code
- HTML code viewed within an HTML document:
<form>
<input type="text" style="color: #ffc0c0; font-family: Verdana; font-weight: bold; font-size: 12px; background-color: #800000;" size="10" maxlength="30">
</form>
- Browser View
- HTML coding viewed through a web browser:
Click inside this text box and type to see an example of the text color.
- HTML Code
- HTML code viewed within an HTML document:
<form>
<input type="text" style="color: #c0c0ff; font-family: Verdana; font-weight: bold; font-size: 12px; background-color: #000080;" size="10" maxlength="30">
</form> - Browser View
- HTML coding viewed through a web browser:
Click inside this text box and type to see an example of the text color.
- HTML Code
- HTML code viewed within an HTML document:
<form>
<input type="text" style="color: #80ff80; font-family: Verdana; font-weight: bold; font-size: 12px; background-color: #004000;" size="10" maxlength="30">
</form> - Browser View
- HTML coding viewed through a web browser:
Click inside this text box and type to see an example of the text color.
- HTML Code
- HTML code viewed within an HTML document:
<form>
<input type="text" style="color: #ff40ff; font-family: Verdana; font-weight: bold; font-size: 12px; background-color: #800080;" size="10" maxlength="30">
</form> - Browser View
- HTML coding viewed through a web browser:
Click inside this text box and type to see an example of the text color.
- HTML Code
- HTML code viewed within an HTML document:
<form>
<input type="text" style="color: #800080; font-family: Verdana; font-weight: bold; font-size: 12px; background-color: #ff00ff;" size="10" maxlength="30">
</form>
- Browser View
- HTML coding viewed through a web browser:
Click inside this text box and type to see an example of the text color.
Using CSS (Cascading Style Sheets) Style Tags to add a bit of color to your web page form input box is a great way to enhance your form’s appearance. Use it wisely.
Visit the HTML Color Codes Chart section to find a 216 web safe color chart.
This is just one small example of how you can use CSS (Cascading Style Sheets) Style Tags within your web page. For additional information on CSS, visit the CSS Tutorial section.
Give it a try…
To view the results below, after making changes to the above code, place your cursor at the end of the code and press your space bar on your keyboard.
Here’s the result…
This concludes the input box background color CSS code.
Visit the following pages for a wealth of copy and paste codes and tips:
HTML Tips
Copy and paste special effect HTML codes for your web page.
HTML Codes
An HTML codes chart you can use to copy and paste codes into your web page.
HTML Color Codes
An HTML color codes chart you can use to copy and paste color codes into your web page.
JavaScript Codes
Copy and paste special effect JavaScript codes for your web page.
Web Design Tips
Tips, tricks, and special effect codes for your web page.
HTML Tags
A list of HTML tags.
HTML 5 Tags
A list of the latest HTML tags to be developed.
ASCII Codes
Special text characters and code for your web page.