1076788 C S S C O D E

ลำดับตอนที่ #10 : field | แถบให้เลือกข้อความ

SELECTME
from. cssdeck (click) | theme. daisytheme (click)
- please never give away -


Select BoxShort OptionThis Is A Longer Option ​

กล่องตัวนี้จะสวยกว่ากล่องทั่วไป :D
ไม่แนะนำให้แก้อะไรในโค้ดค่ะ โอกาสพังสูง -3-
แต่จริงๆ แล้วจะแก้ก็ทำได้ตามสะดวกค่ะ :) 

<label><select><option selected="selected">Select Box</option><option>Short Option</option><option>This Is A Longer Option</option></select> </label>​ <style type="text/css"> /* The CSS */ select { padding:3px; margin: 0; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; -webkit-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset; -moz-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset; box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset; background: #f8f8f8; color:#888; border:none; outline:none; display: inline-block; -webkit-appearance:none; -moz-appearance:none; appearance:none; cursor:pointer; } /* Targetting Webkit browsers only. FF will show the dropdown arrow with so much padding. */ /* cssdecktoblacklipz */ @media screen and (-webkit-min-device-pixel-ratio:0) { select {padding-right:18px} } label {position:relative} label:after { content:'<>'; font:11px "Consolas", monospace; color:#aaa; -webkit-transform:rotate(90deg); -moz-transform:rotate(90deg); -ms-transform:rotate(90deg); transform:rotate(90deg); right:8px; top:2px; padding:0 0 2px; border-bottom:1px solid #ddd; position:absolute; pointer-events:none; } label:before { content:''; right:6px; top:0px; width:20px; height:20px; background:#f8f8f8; position:absolute; pointer-events:none; display:block; }</style>

:-Daisy ✿