стиль формы (выберите) с использованием JavaScript, без рамки?

Question

Кто-нибудь знает, как я могу стилизовать элемент формы с помощью JavaScript, но без рамки? Нашел хороший плагин для jquery, но я вообще не использую jquery на своем веб-сайте, поэтому я хочу избежать его, если это возможно ..

Я хочу создать поле выбора, которое выглядит следующим образом:

http://iforce.co.nz/i/qebncmoz.png

, чтобы уточнить, я хочу установить изображение / фон в поле выбора, чтобы я мог иметь пользовательскую стрелку выпадающего списка

Answer 1

Вы должны использовать другой элемент.

Лучшее направление, на которое я могу вам указать, это http://v2.easy -designs.net / articles / replaceSelect / - кажется, оно объясняет, как делать то, что вы хотите, очень хорошо.

Answer 2

Вы можете стилизовать элементы через атрибут style (заменив '-' на случай верблюда) следующим образом:

document.getElementById('elem').style.backgroundColor = 'red';

Но лучше поместить стили в CSS и просто изменить классы в JavaScript:

document.getElementById('elem').className = 'roundedCornerButton';

Answer 3

Существует множество замен раскрывающихся меню, для которых не требуется каркас. Попробуйте Googling javascript drop down. Смотрите необычный пример здесь .

Но подумайте об использовании фреймворка. 20-50kb не так много в эти времена, это не так много даже для коммутируемой линии. Фреймворки предоставляют множество маленьких помощников для выполнения всевозможных задач, и вы можете ссылаться даже на версии, размещенные в Google , с большой вероятностью того, что пользователь уже их кэшировал.

Answer 4

Стилизация выполняется с помощью CSS, а не JS. JQuery используется для ярлыков в Javascript.

Не происходит "замены" - тег все еще находится под сценой, но хорошее использование CSS делает его похожим на это изображение.

Answer 5

Для этого вам не понадобится Javascript, подойдет чистый CSS.

Проверьте эту статью, например: Стиль веб-форм с использованием CSS

Answer 6

Это невозможно без javascript. Смотри здесь мой вопрос Как оформить выпадающий список

И если вы не хотите использовать какие-либо рамки, попробуйте это

http://v2.easy -designs.net / статьи / replaceSelect /

Answer 7

Если с элементом формы связан идентификатор, вы можете использовать код, подобный следующему:

elem = document.getElementById(elemId);
elem.style.background = 'white';

Полагаю, вы хотите динамически изменить стиль элемента; иначе вам не нужен JavaScript, чтобы получить то, что вы хотите.