HTML/CSS/Form Style/select
Содержание
- 1 Creating groups of options with a disabled option
- 2 Drop down select boxes
- 3 fieldset to wrap "select" control
- 4 input:focus, textarea:focus, select:focus
- 5 Tell us what"s on your mind..
- 6 multiple select
- 7 optgroup
- 8 Option groups
- 9 option tag
- 10 Property selector for option
- 11 Scolling select boxes
- 12 Select boxes with the multiple attribute
- 13 Select boxes with the optgroup element
- 14 Select control Jump Menu
- 15 select tag
- 16 select tag presents a drop-down list with choices indicated by the option tags
- 17 Set form select event option color and background color
- 18 Set form select font size
- 19 Set form select option font size
- 20 Style for select option
Creating groups of options with a disabled option
<source lang="html4strict">
<?xml version="1.0" ?> <!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" lang="en" xml:lang="en"> <head>
<title>Creating groups of options with a disabled option</title>
</head> <body> <form action="" method="get" name="frmInfo">
Please select the product you are interested in:
<select name="selInformation"> <option disabled="disabled" value=""> -- Hardware -- </option> <option value="Desktop">Desktop computers</option> <option value="Laptop">Laptop computers</option> <option disabled="disabled" value=""> -- Software -- </option> <option value="OfficeSoftware">Office software</option> <option value="Games">Games</option> <option disabled="disabled" value=""> -- Peripherals -- </option> <option value="Monitors">Monitors</option> <option value="InputDevices">Input Devices</option> <option value="Storage">Storage</option> </select>
<input type="submit" value="Submit" />
</form>
</body>
</html>
</source>
Drop down select boxes
<source lang="html4strict">
<?xml version="1.0" ?> <!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" lang="en" xml:lang="en"> <head>
<title>Drop down select boxes</title>
</head> <body> <form action="http://www.e.ru" method="get" name="frmColors"> <select name="selColor">
<option selected="selected" value="">Select color</option> <option value="red">Red</option> <option value="green">Green</option> <option value="blue">Blue</option>
</select> </form> </body> </html>
</source>
fieldset to wrap "select" control
<source lang="html4strict">
<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title>Untitled Document</title> </head> <body> <form style="width: 200px;"> <fieldset><legend>Cheeses of the world</legend>
<select name="cheesemenu"> <option>Cheddar</option> <option>Stilton</option> <option>Brie</option> </select>
<input type="submit" value="submit" />
</fieldset> </form> </body> </html>
</source>
input:focus, textarea:focus, select:focus
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html>
<head>
<meta http-equiv="content-type" content="text/xhtml; charset=windows-1252" />
<meta http-equiv="content-language" content="en-us" />
<style type="text/css">
input:focus, textarea:focus, select:focus {
background: white;
}
</style>
<title>Feedback Form - Widgets and What"s-its</title>
</head>
<body>
Tell us what"s on your mind..
Name:
<input type="text" size="25" id="name" name="feedback[name]" />
Email:
<input type="text" size="25" id="email" name="feedback[email]" />
Address:
<textarea name="feedback[address]" id="address" cols="40" rows="3" wrap="virtual"></textarea>
Comments:
<textarea name="feedback[message]" id="message" cols="40" rows="6" wrap="virtual"></textarea>
</form> </body>
</html>
</source>
multiple select
<source lang="html4strict">
<!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 http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>A multiline select</title>
</head> <body>
<form method="post" action="">
<select name="size" multiple="multiple">
<option>E</option>
<option>M</option>
<option>O</option>
</select>
</form>
</body> </html>
</source>
optgroup
<source lang="html4strict">
<?xml version="1.0" encoding="iso-8859-1"?> <!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"> <head> <title>Form Example</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css">
body {font-family:arial, verdana, sans-serif;}
</style> </head> <body> <form action="" method="post" name="frmSelectStaff"> <select name="selStaff">
<optgroup label="Sales"> <option value="E">E</option> <option value="S">S</option> <option value="A">A</option> <option value="J">J</option> <option value="V">V</option> <option value="S">S</option> </optgroup> <optgroup label="Marketing"> <option value="B">D</option> <option value="L">K</option> <option value="M">M</option> </optgroup> <optgroup label="IT"> <option value="A">A</option> <option value="T">T</option> </optgroup> <option lable="Support"> <option value="B">B</option> <option value="A">A</option> </option>
</select>
<input type="submit" />
</form>
</body> </html>
</source>
Option groups
<source lang="html4strict">
<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Option groups</title>
</head> <body>
<form method="post" action="/cgi-bin/formhandler.cgi">
<select name="extra">
<option value="" selected="selected">Choose one extra topping</option>
<optgroup label="Meat">
<option>Pepperoni</option>
<option>Sausage</option>
<option>Canadian Bacon</option>
<option>Anchovies</option>
</optgroup>
<optgroup label="Fruits/Veggies/Fungi">
<option>Onions</option>
<option>Peppers</option>
<option>Olives</option>
<option>Mushrooms</option>
<option>Pineapple</option>
</optgroup>
<optgroup label="Other">
<option>Extra cheese</option>
</optgroup>
</select>
</form>
</body> </html>
</source>
option tag
<source lang="html4strict">
<!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 http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>The option element</title>
</head> <body>
<form method="post" action="/formhandler.cgi">
<select name="size">
<option value="" selected="selected">pick a size...</option>
<option value="1">Small</option>
<option value="2">Medium</option>
<option value="3">Large</option>
</select>
</form>
</body> </html>
</source>
Property selector for option
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html>
<head>
<style type="text/css">
option[value] {
letter-spacing: 2px;
}
option[value="newspaper"] {
background: orange;
}
option[value="magazine"] {
background: red;
}
option[value="television"] {
background: black;
}
option[value="radio"] {
background: green;
}
option[value="other"] {
background: blue;
}
input[name$="[name]"] {
color: darkred;
}
input[name$="[email]"] {
color: darkblue;
}
textarea[name$="[address]"] {
color: purple;
}
textarea[name$="[message]"] {
color: black;
}
select[name$="[heard]"] {
color: darkgreen;
}
input[name^="feedback"], select[name^="feedback"], textarea[name^="feedback"] {
font-weight: bold;
}
</style>
<title>Feedback Form - Widgets and What"s-its</title>
</head>
<body>
<form>
<label for="feedback[heard]">How"d you hear about us?</label>
<select name="feedback[heard]">
<option value="">Choose...</option>
<option value="newspaper">Newspaper</option>
<option value="magazine">Magazine</option>
<option value="television">Television</option>
<option value="radio">Radio</option>
<option value="other">Other</option>
</select>
</form> </body>
</html>
</source>
Scolling select boxes
<source lang="html4strict">
<?xml version="1.0" ?> <!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" lang="en" xml:lang="en"> <head>
<title>Scolling select boxes</title>
</head> <body> <form action="" name="frmDays" method="get">
<select size="4" name="selDay"> <option value="Mon">Monday</option> <option value="Tue">Tuesday</option> <option value="Wed">Wednesday</option> <option value="Thu">Thursday</option> <option value="Fri">Friday</option> <option value="Sat">Saturday</option> <option value="Sun">Sunday</option> </select>
<input type="submit" value="Submit" />
</form>
</body>
</html>
</source>
Select boxes with the multiple attribute
<source lang="html4strict">
<?xml version="1.0" ?> <!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" lang="en" xml:lang="en"> <head>
<title>Select boxes with the multiple attribute</title>
</head> <body> <form action="" method="get" name="frmDays">
Please select more than one day of the week:
<select name="selDays" multiple="multiple"> <option value="Mon">Monday</option> <option value="Tue">Tuesday</option> <option value="Wed">Wednesday</option> <option value="Thu">Thursday</option> <option value="Fri">Friday</option> <option value="Sat">Saturday</option> <option value="Sun">Sunday</option> </select>
<input type="submit" value="Submit" />
</form>
</body>
</html>
</source>
Select boxes with the optgroup element
<source lang="html4strict">
<?xml version="1.0" ?> <!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" lang="en" xml:lang="en"> <head>
<title>Select boxes with the <optgroup> element</title>
</head> <body> <form action="" method="get" name="frmInfo">
Please select the product you are interested in:
<select name="selInformation"> <optgroup label="Hardware"> <option value="Desktop">Desktop computers</option> <option value="Laptop">Laptop computers</option> </optgroup> <optgroup label="Software"> <option value="OfficeSoftware">Office software</option> <option value="Games">Games</option> </optgroup> <optgroup label="Peripherals"> <option value="Monitors">Monitors</option> <option value="InputDevices">Input Devices</option> <option value="Storage">Storage</option> </optgroup> </select>
<input type="submit" value="Submit" />
</form>
</body>
</html>
</source>
Select control Jump Menu
<source lang="html4strict">
<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title>unstyled form</title> <script type="text/JavaScript">
</script> </head> <body> <form id="form1">
<select name="menu1" onchange="myF("parent",this,0)">
<option>Return to home page</option>
<option>Contact</option>
<option>unnamed1</option>
</select>
</form> </body> </html>
</source>
select tag
<source lang="html4strict">
<!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 http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>The select element</title>
</head> <body>
<form method="post" action="">
<select name="size">
<option>Small</option>
<option>Medium</option>
<option>Large</option>
</select>
</form>
</body> </html>
</source>
select tag presents a drop-down list with choices indicated by the option tags
<source lang="html4strict">
<?xml version = "1.0"?> <!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">
<body>
<form method = "post" action = "/cgi-bin/formmail">
<label>Rate our site: <select name = "rating"> <option selected = "selected">Amazing</option> <option>10</option> <option>9</option> <option>8</option> <option>7</option> <option>6</option> <option>5</option> <option>4</option> <option>3</option> <option>2</option> <option>1</option> <option>Awful</option> </select> </label>
<input type = "submit" value = "Submit Your Entries" /> <input type = "reset" value = "Clear Your Entries" />
</form> </body>
</html>
</source>
Set form select event option color and background color
<source lang="html4strict">
<!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"> <head> <title></title> <style type="text/css"> option.even {
color: blue; background-color: red;
} </style> </head> <body>
<select name="Topping_ID" size="6" multiple> <option value="1">Pepperoni</option> <option value="2" class="even">Sausage</option> <option value="3">Green Peppers</option> <option value="4" class="even">Pineapple</option> <option value="5">Chicken</option> <option value="6" class="even">Ham</option> <option value="7">Olives</option> <option value="8" class="even">Onions</option> <option value="9">Red Peppers</option> </select>
</body> </html>
</source>
Set form select font size
<source lang="html4strict">
<!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"> <head> <title></title> <style type="text/css"> select {
font-size: 0.9em;
} </style> </head> <body>
<select name="Topping_ID" size="6" multiple> <option value="1">Pepperoni</option> <option value="2" class="even">Sausage</option> <option value="3">Green Peppers</option> <option value="4" class="even">Pineapple</option> <option value="5">Chicken</option> <option value="6" class="even">Ham</option> <option value="7">Olives</option> <option value="8" class="even">Onions</option> <option value="9">Red Peppers</option> </select>
</body> </html>
</source>
Set form select option font size
<source lang="html4strict">
<!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"> <head> <title></title> <style type="text/css"> option {
color: white; background-color: blue;
} </style> </head> <body>
<select name="Topping_ID" size="6" multiple> <option value="1">Pepperoni</option> <option value="2" class="even">Sausage</option> <option value="3">Green Peppers</option> <option value="4" class="even">Pineapple</option> <option value="5">Chicken</option> <option value="6" class="even">Ham</option> <option value="7">Olives</option> <option value="8" class="even">Onions</option> <option value="9">Red Peppers</option> </select>
</body> </html>
</source>
Style for select option
<source lang="html4strict">
<html xmlns="http://www.w3.org/1999/xhtml"> <head>
<title></title> <style type="text/css">
option {
color: white; background-color: blue;
} .even {
background-color: red; color: blue;
}
</style>
</head> <body> <form action="" method="post" name="myform">
| Toppings | <select name="Topping_ID" size="6" multiple>
<option value="1">Option 1</option>
<option value="2" class="even">Option 2</option>
<option value="3">Option 3</option>
<option value="4" class="even">Option 4</option>
<option value="5">Option </option>
<option value="6" class="even">Option 5</option>
<option value="7">Olives</option>
<option value="8" class="even">Option 6</option>
<option value="9">Option 9</option>
</select> |
</form> </body> </html>
</source>
