input color:#777; : input « Form « HTML / CSS






  1. HTML / CSS
  2. Form
  3. input

input color:#777;

   

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<meta name="Description" content="Information architecture, Web Design, Web Standards." />
<meta name="Keywords" content="your, keywords" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Distribution" content="Global" />
<meta name="Author" content="Erwin Aligam - ealigam@gmail.com" />
<meta name="Robots" content="index,follow" />

<style type='text/css'>
/* form elements */
form {
  margin:10px; 
  padding: 0 5px;
  background: #F5F5F5;  
}
label {
  display:block;
  font-weight:bold;
  margin:5px 0;
}
input {
  padding:2px;
  border:1px solid #eee;
  font: normal 1em Verdana, sans-serif;
  color:#777;
}
textarea {
  width:400px;
  padding:2px;
  font: normal 1em Verdana, sans-serif;
  border:1px solid #eee;
  height:100px;
  display:block;
  color:#777;
}
input.button { 
  font: bold 12px Arial, Sans-serif; 
  height: 24px;
  margin: 0;
  padding: 2px 3px; 
  color: #333;
  background: #e7e6e6 url(MarketPlace-images/button.jpg) repeat-x;
  border: 1px solid #dadada;
}

</style>



<title>Marketplace</title>

</head>

<body>

<!-- wrap starts here -->
<div id="wrap">
      <h3>Example Form</h3>
      <form action="#">      
      <p>      
      <label>Name</label>
      <input name="dname" value="Your Name" type="text" size="30" />
      <label>Email</label>
      <input name="demail" value="Your Email" type="text" size="30" />
      <label>Your Comments</label>
      <textarea rows="5" cols="5"></textarea>
      <br />  
      <input class="button" type="submit" />    
      </p>    
      </form>  
</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 padding: 2px;
32.input border: 1px solid #EFEFEF;
33.input font: normal 1em Verdana, 'Trebuchet MS', Tahoma, sans-serif;
34.input color: #666666;
35.input:focus background-color:#ffffcc;
36.input:focus border-width:3px;
37.input:focus border-color:#ff0000;
38.input background: blue;
39.input color: white;
40.input border: 3px solid royalblue;
41.Input border: 2px inset #CECECE;
42.Input height: 17px;
43.Input float: left;
44.Input margin: 8px 0 0 7px;
45.Input padding: 0 0 0 5px;
46.Input font-size: 12px;
47.Input color: #454545
48.Input height: 20px;
49.Input width: 329px;
50.Input border-top: 1px solid #700303;
51.Input border-left: 1px solid #700303;
52.Input border-bottom: 0px;
53.Input border-right: 0px;
54.Input margin: 0 5px 0 11px;
55.Input padding: 2px 0 0 2;
56.Input background-color: red
57.input border: 1pt solid #6A849D;
58.input font: normal 10px tahoma;
59.input color: #707070;
60.input margin: 0px 0px 5px 0px;
61.input color: lightblue;
62.input border: 3px solid lightblue;
63.A simple form with input elements
64.An input form that calls a form-to-email Cgi script
65.input color: #fcc; background-color: #900; font-size: 1.5em; border: 1px solid #660; padding: 4px;
66.input margin-bottom: 1.5em; width: 50%; color: #666; background-color: #ccc;
67.Using border to highlight input
68.input color: #00008B;background-color: #ADD8E6;border: 1px outset #00008B;
69.input color: #00008B;background-color: #E3F2F7;border: 1px inset #00008B;width: 200px;
70.input:focus border: 2px solid #000000;
71.input:focus background-color:#ffffcc; border-width:3px;border-color:#ff0000;
72.Single line text input control
73.Multi line text input control
74.input:focus background-color:#c4c4c4;
75.input background-color:#cccccc;
76.input for email
77.File input
78.Image input
79.Hidden Input Example
80.Message Input form
81.File Upload Test
82.A prepopulated text field with a maximum length
83.Change textbox border when focus in
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