|
Stylish FORM
| |||
|
| ||
|
| |||
|
<INPUT type="text" size="50" style="background-color: #dcdcdc;">
| |||
|
<INPUT type="text" size="50" style="background-color: #f0f8ff;">
| |||
|
<INPUT type="text" size="50" style="background-color: #f0fff0;">
| |||
|
<INPUT type="text" size="50" style="background-color: #fff0f5;">
| |||
|
<INPUT type="text" size="50" style="background-color: #dcdcdc;
border-style: ridge; border-color: #a9a9a9">
| |||
|
<INPUT type="text" size="50" style="background-color: #dcdcdc;
border-style: groove; border-color: #a9a9a9">
| |||
|
<INPUT type="text" size="50" style="background-color: #dcdcdc;
border-style: outset; border-color: #a9a9a9">
| |||
|
<INPUT type="text" size="50" style="background-color: #dcdcdc;
border-style: solid; border-color: #a9a9a9;">
| |||
|
<INPUT type="text" size="50" style="background-color: #dcdcdc; border-width: 4px;
border-style: double; border-color: #a9a9a9;">
| |||
|
マウスを乗せると、色が変わります
|
<INPUT type="text" size="50" name="name" id="name"
style="background-color: #dcdcdc;"
onmouseOver="this.style.background='f0fff0'"
onmouseOut="this.style.background='dcdcdc'">
| ||
|
| |||
|
<BUTTON type="button" style="color: #a9a9a9;
background-color: #a9a9a9;">
<DIV>ボタンです</DIV>
</BUTTON>
| |||
|
<BUTTON type="button" style="color: #a9a9a9;
background-color: #a9a9a9; border-color: #c0c0c0;
border-style: ridge;">
<DIV>ボタンです</DIV>
</BUTTON>
| |||
|
<BUTTON type="button" style="color: #a9a9a9;
background-color: #a9a9a9; border-color: #c0c0c0;
border-style: groove;">
<DIV>ボタンです</DIV>
</BUTTON>
| |||
|
<BUTTON type="button" style="color: #a9a9a9;
background-color: #a9a9a9; border-color: #c0c0c0;
border-style: outset;">
<DIV>ボタンです</DIV>
</BUTTON>
| |||
|
<BUTTON type="button" style="color: #a9a9a9;
background-color: #a9a9a9; border-color: #c0c0c0;
border-style: inset;">
<DIV>ボタンです</DIV>
</BUTTON>
| |||
|
<BUTTON type="button" style="color: #a9a9a9;
background-color: #a9a9a9; border-color: #c0c0c0;
border-style: solid;">
<DIV>ボタンです</DIV>
</BUTTON>
| |||
|
<BUTTON type="button" style="color: #a9a9a9;
background-color: #a9a9a9; border-color: #c0c0c0;
border-width: 4px; border-style: double;">
<DIV>ボタンです</DIV>
</BUTTON>
| |||
|
マウスを乗せると、ボタンが飛び出します
|
<BUTTON type="button" style="color: #a9a9a9;
background-color: #a9a9a9;
border-color: #c0c0c0; border-style: inset;"
onmouseOver="this.style.borderStyle='outset'"
onmouseOut="this.style.borderStyle='inset'">
<DIV>ボタンです</DIV>
</BUTTON>
| ||
|
| |||