Как оформить выпадающие списки?

Question

Как оформить выпадающие списки?

0

Как стилизовать выпадающие выпадающие прямоугольники?

Я создал jsfiddle http://jsfiddle.net/CGDhB/

<div class="container">
    <div class="salmatWrapper">
        <div class="col-sm-12 contents">
            <img src="http://staging.serviceportal.com.au/service05/alinta/images/header.png" alt="Energy Unit Conversion Tool" class="img-responsive" />
            <div class="form">
                <form class="form-horizontal">
                    <fieldset>
                        <div class="col-xs-6 left">
                            <!-- Enter Value-->
                            <div class="form-group">
                                <div class="col-xs-12">
                                    <input id="custom1" name="custom1" type="text" placeholder="Enter Value" class="form-control input-md">
                                </div>
                            </div>
                            <!-- Convert From -->
                            <div class="form-group">
                                <div class="col-xs-12">
                                    <select id="custom2" name="custom2" class="form-control">
                                        <option value="" class="selectDefaultText">Convert From</option>
                                        <option value="1">Option one</option>
                                        <option value="2">Option two</option>
                                    </select>
                                </div>
                            </div>
                            <!-- Convert To -->
                            <div class="form-group">
                                <div class="col-xs-12">
                                    <select id="custom3" name="custom3" class="form-control">
                                        <option value="" class="selectDefaultText">Convert To</option>
                                        <option value="1">Option one</option>
                                        <option value="2">Option two</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="col-xs-6 right">
                            <!-- Textarea -->
                            <div class="form-group">
                                <div class="col-xs-12">
                                    <textarea class="form-control" id="custom4" name="custom4">Result here ...</textarea>
                                </div>
                            </div>
                        </div>
                    </fieldset>
                </form>
            </div>
            <div class="col-sm-12">
                <img src="http://staging.serviceportal.com.au/service05/alinta/images/footer.png" alt="Check our affordable electrity and gas packages!" class="img-responsive" />
            </div>
        </div>
    </div>
</div>

Я хочу, чтобы выпадающие изображения выглядели так, как показано ниже.

В принципе, я хочу, чтобы этот маленький значок и выпадающие прямоугольники выбирались так, как показано на рисунке. Я смущен этим. Промежуточный канал можно посмотреть здесь http://bit.ly/1eNm3jv

Hello Universe 04 дек. 2013, в 03:14

Источник

0

Вам нужно будет использовать что-то вроде jQuery с Uniform.js или другим плагином для стилевого оформления. Вы не можете стилизовать фактические элементы <select> таким образом, внутренности находятся под shadowDOM, и большинство браузеров не позволят вам сильно их изменить. Uniform.js работает путем замены элементов формы, чтобы они могли стилизоваться, и при изменении обновит исходный элемент <select> .
Ming 04 дек. 2013, в 03:22
0

есть ли какие-то особые плагины jquery, которые вы, ребята, можете направить мне тоже? Uniform.js выглядит нормально. Есть ли другие, которые вы, ребята, рекомендуете?
Hello Universe 04 дек. 2013, в 04:18
1

Я действительно использую только Uniform.js. Мне приходилось работать с Dropkick и так сильно его ненавидел. Я не очень хорошо осведомлен о других плагинах, просто использовал эти два и предпочитаю Uniform.js.
Ming 04 дек. 2013, в 04:24

Показать ещё 1 комментарий

Теги:

javascript

html

css

html-select

1 ответ

Ещё вопросы

Вам нужно будет использовать что-то вроде jQuery с Uniform.js или другим плагином для стилевого оформления. Вы не можете стилизовать фактические элементы <select> таким образом, внутренности находятся под shadowDOM, и большинство браузеров не позволят вам сильно их изменить. Uniform.js работает путем замены элементов формы, чтобы они могли стилизоваться, и при изменении обновит исходный элемент <select> .
есть ли какие-то особые плагины jquery, которые вы, ребята, можете направить мне тоже? Uniform.js выглядит нормально. Есть ли другие, которые вы, ребята, рекомендуете?
Я действительно использую только Uniform.js. Мне приходилось работать с Dropkick и так сильно его ненавидел. Я не очень хорошо осведомлен о других плагинах, просто использовал эти два и предпочитаю Uniform.js.

jaminroe · Accepted Answer · 2013-12-04T01-27-00.000Z

Вы действительно не можете выбрать стиль. Насколько я знаю, единственное, что вы действительно можете сделать, это цвет границы и отступы. Возможно также размер шрифта. Как упоминалось в @setek, вам придется использовать какой-то плагин.