Share Button
Hướng Dẫn Tạo Giao Diện Nút Selection Đơn Giản
09
September
2013

Như các tut hướng dẫn khác mà trung tâm đào tạo khóa hoc thiet ke website tai da nang  đã chia sẽ về các giao diện được tùy chỉnh bởi CSS và HTML. Hôm nay trung tâm sẽ tiếp tục với tùy chỉnh giao nhỏ với combox css select box style  html :

1      Tạo file html:

<html>

<title>Style Combox</style>

<body>

<label>

    <select>

        <option selected> Select Box </option>

        <option>Short Option</option>

        <option>This Is A Longer Option</option>

    </select>

</label>​

</body>

</html>

Tạo thẻ style với nội dung sau và đặt trong thẻ <body></body>:

<style>

body, html {background:#444; text-align:center; padding:50px 0;}

 

/* 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. */

@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>

Ở TUT này trung tâm đào tạo hoc lap trinh php tai da nang  hướng các bạn sử dụng đến ngôn ngữ động như PHP để đẩy dữ liệu vào trong combox selector này, để đa dạng dữ liệu! chúc các bạn có những trải nghiệm thú vị !

 

Đăng bình luận

Thành viên bình luận

  • 950 View