nader
2 سال پیش توسط nader مطرح شد
6 پاسخ

استایل دهی به سلکت باکس

سلام ببخشید چجوری میشه به option های داخل یک select box استایل بدیم ؟؟


ثبت پرسش جدید
رایموند
تخصص : مختصص وردپرس - برنامه نویس لار...
@Raymond 2 سال پیش مطرح شد
0

درود خوبی...
HTML:

<div class="selectbox">
        <select name="" id="">
            <option value="">Test</option>
            <option value="">Test</option>
            <option value="">Test</option>
        </select>
    </div>

CSS:

.selectbox {
    position: relative;
}

.selectbox::before {
    content: '';
    position: absolute;
    top: 50%;
    margin-top: -6px;
    right: .7rem;
    width: 0;
    height: 0;
    border: solid black;
    border-width: 0 1px 1px 0;
    display: inline-block;
    padding: 3px;
    transform: rotate(45deg);
}

select {
    border: 1px solid #EEE;
    border-radius: .25rem;
    padding: .5rem 1.5rem .5rem .5rem;
    display: flex;
    background-color: white;
    outline: 0;
    cursor: pointer;
    appearance: none;
}

nader
تخصص : برنامه نویس
@sherafaty 2 سال پیش مطرح شد
0

یعنی با استفاده از شبه المنت before ??


رایموند
تخصص : مختصص وردپرس - برنامه نویس لار...
@Raymond 2 سال پیش مطرح شد
0

@sherafaty
با before می توانید ایکون تعریف کنید.


nader
تخصص : برنامه نویس
@sherafaty 2 سال پیش مطرح شد
1

ممنونم ازتون 👊👊👊


نجما
@n.bahreman157 2 سال پیش آپدیت شد
0

سلام شبتون بخیر

تا جایی که من اطلاع دارم به تگ های option نمیشه استایل های کاربردی و زیبا داد مگر اینکه از js استفاده بکنید . تو لینک زیر در مورد سلکت باکس توضیح میده و انتهاش هم یک مثال آورده که میتونه کمکتون بکنه :
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select
و همچنین تو لینک زیر یک مثال آورده که میتونه براتون مفید باشه :
https://www.w3schools.com/howto/howto_custom_select.asp


nader
تخصص : برنامه نویس
@sherafaty 2 سال پیش مطرح شد
0

خیلی ازتون ممنونم 👍👍👍


برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام