មេរៀនទី៦: Style លើ Button រូបភាព

បង្កើត Form មិនមែនជារឿងពិបាកនោះឡើយ ប៉ុន្តែដើម្បីឲ្យ Form នោះមានភាព​ទាក់ទាញ លោកអ្នក​ចាំបាច់​ត្រូវ​បន្ថែម Style ទៅលើវា​ ។ កាលពីអត្ថបទ​មុនៗ សំបុកអាយធី បានលើកពីការប្រើប្រាស់ Style នានារួចហើយ ។
ជំហានទី១ សូមបង្កើត File HTML ជាលក្ខណៈ Form

<form action=”">
<label for=”name”>Name: </label> <input type=”text” id=”name” />
<label for=”password”>Password: </label> <input type=”password” id=”password” />
<label>&nbsp; </label> <input type=”submit” value=”Submit” /> <input type=”submit” value=”Cancel” />
</form>


រួចបន្ថែម Style ដោយភ្ជាប់រូបភាព សម្រាប់ដាក់លើប៊ូតុង នៅពេល MouseOver

CSS
input {
border: 1px solid #006;
background: #ffc;
}
.input:hover {
border: 1px solid #f00;
background: #ff6;
}
button {
border: none;
background: url(‘/forms/up.png’) no-repeat top left;
padding: 2px 8px;
}
.button:hover {
border: none;
background: url(‘/forms/down.png’) no-repeat top left;
padding: 2px 8px;
}
label {
display: block;
width: 150px;
float: left;
margin: 2px 4px 6px 4px;
text-align: right;
}
br { clear: left; }