azami.cu@gmail.com | +98912 373 8239

ایجاد یک select box زیبا با CSS

از مجموعه تکنیک های CSS - برای حرفه ای شدن
 select box, beautiful select box, css select box, custom select box, جعبه انتخاب, جعبه انتخاب با CSS, جعبه انتخاب سفارشی, css تکنیک, css آموزش
به همت مهندس اعظمی در 1392/11/03

سلام بر شما دوستان عزیز



حتما برای شما هم اتفاق افتاده که select box رو به صفحه اضافه بکنید و بخواید به اون استایل بدید ولی ندونید که چیکار باید بکنید!

مشکلی نیست ما اینجا طریقه انجام این کار رو برای شما قرار دادیم:

کدهای HTML

ابتدا یک select box می سازیم و اون رو داخل یک label قرار میدیم تا بتونیم فلشش رو شبیه سازی بکنیم




و این هم کدهای 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;
}

//ایجاد فلش و قرار دادن اون روی فلش پیشفرض برای زیبا تر شدن
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;
}

                        

اینم پیش نمایش:








با تشکر از توجه شما -با عضویت در sarat.ir از آخرین آموزش ها و مطالب با خبر شوید.



Tags: , , , , , , , ,



Tags:   select box, beautiful select box, css select box, custom select box, جعبه انتخاب, جعبه انتخاب با CSS, جعبه انتخاب سفارشی, css تکنیک, css آموزش