amir

5 سال پیش توسط amir مطرح شد

مشکل در کد قالب

سلام دوستان
میخوام داخل فرمم یک select به صورت input مثل تصویر زیر درست کنم کدش دارین بهم بدین؟
http://s6.picofile.com/file/8378252176/am.png

ثبت پرسش جدید

فرزاد رحیمی

@farzad.rahimi 5 سال پیش آپدیت شد

@amirmi6500

<!DOCTYPE html>
<html>

<head>

    <script>
        var expanded = false;
        function showCheckboxes() {
            var checkboxes = document.getElementById("checkboxes");
            if (!expanded) {
                checkboxes.style.display = "block";
                expanded = true;
            } else {
                checkboxes.style.display = "none";
                expanded = false;
            }
        }
    </script>

    <style>
        .multiselect {
            width: 200px;
        }

        .selectBox {
            position: relative;
        }

        .selectBox select {
            width: 100%;
            font-weight: bold;
        }

        .overSelect {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
        }

        #checkboxes {
            display: none;
            border: 1px #dadada solid;
        }

        #checkboxes label {
            display: block;
        }

        #checkboxes label:hover {
            background-color: #1e90ff;
        }
    </style>

</head>

<body dir="rtl">

    <form>
        <div class="multiselect">
            <div class="selectBox" onclick="showCheckboxes()">
                <select>
                    <option>امکانات</option>
                </select>
                <div class="overSelect"></div>
            </div>
            <div id="checkboxes">
                <label for="1">
                    <input type="checkbox" id="1" />آسانسور</label>
                <label for="2">
                    <input type="checkbox" id="2" />پارکینگ</label>
                <label for="3">
                    <input type="checkbox" id="3" />عدم حضور مالک</label>
                <label for="4">
                    <input type="checkbox" id="4" />درب برقی</label>
                <label for="5">
                    <input type="checkbox" id="5" />تراس</label>
                <label for="6">
                    <input type="checkbox" id="6" />انباری</label>
            </div>
        </div>
    </form>

</body>

</html>

ارسال پاسخ

فرزاد رحیمی

@farzad.rahimi 5 سال پیش مطرح شد

سلام

http://jsfiddle.net/pmrotule/w7aakdbb/

ارسال پاسخ

amir

@amirmi6500 5 سال پیش مطرح شد

به صورت input میخوام کدی هست مثل تصویر؟

ارسال پاسخ

فرزاد رحیمی

@farzad.rahimi 5 سال پیش آپدیت شد

@amirmi6500

<!DOCTYPE html>
<html>

<head>

    <script>
        var expanded = false;
        function showCheckboxes() {
            var checkboxes = document.getElementById("checkboxes");
            if (!expanded) {
                checkboxes.style.display = "block";
                expanded = true;
            } else {
                checkboxes.style.display = "none";
                expanded = false;
            }
        }
    </script>

    <style>
        .multiselect {
            width: 200px;
        }

        .selectBox {
            position: relative;
        }

        .selectBox select {
            width: 100%;
            font-weight: bold;
        }

        .overSelect {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
        }

        #checkboxes {
            display: none;
            border: 1px #dadada solid;
        }

        #checkboxes label {
            display: block;
        }

        #checkboxes label:hover {
            background-color: #1e90ff;
        }
    </style>

</head>

<body dir="rtl">

    <form>
        <div class="multiselect">
            <div class="selectBox" onclick="showCheckboxes()">
                <select>
                    <option>امکانات</option>
                </select>
                <div class="overSelect"></div>
            </div>
            <div id="checkboxes">
                <label for="1">
                    <input type="checkbox" id="1" />آسانسور</label>
                <label for="2">
                    <input type="checkbox" id="2" />پارکینگ</label>
                <label for="3">
                    <input type="checkbox" id="3" />عدم حضور مالک</label>
                <label for="4">
                    <input type="checkbox" id="4" />درب برقی</label>
                <label for="5">
                    <input type="checkbox" id="5" />تراس</label>
                <label for="6">
                    <input type="checkbox" id="6" />انباری</label>
            </div>
        </div>
    </form>

</body>

</html>

ارسال پاسخ

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

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

دوره‌های آموزشی

مسیرهای یادگیری

پیشرفت من

دوره‌های رایگان

گواهی پایان دوره

محبوب‌ترین آموزش‌ها

مشکل در کد قالب

گزینش سوالات

گفت و گو های مرتبط

دسته ‌بندی سوالات

تگ‌های محبوب

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