Флажок CSS для Wordpress Contact Form 7 без div

Я искал форум и Google, и эта конкретная проблема кажется простой, но я не могу найти ответ. Я хочу стилизовать флажок для контактной формы 7 без использования div. Но стиль, который я хочу использовать, это те, которые используют div. Например, я хочу использовать стиль для SQUARE ONE из этого примера: http://codepen.io/bbodine1/pen/novBm

Поскольку в приведенном выше примере используются элементы div (что меня не смущает), контактная форма 7, похоже, не работает, поскольку для заполнения поля формы требуется более одного элемента div. Вот код, который я пытаюсь отформатировать:

<p>What are you interested in? Select all that apply. (required)<br />
[checkbox* service-interested "Item 1" "Item 2" "Item 3" "Item 4" "Item 5" "Other"] </p>

Это оригинальный пост, который поможет стилизовать http://contactform7.com/styling-contact-form/


wordpress html css customization contact-form
person sdesign    schedule 21.01.2015    source источник
comment
Почему бы не добавить класс к флажку и не стилизовать его?   -  person Howli    schedule 21.01.2015
comment
Возможно, вы не понимаете, что для большинства браузеров нет возможности изменить стиль флажков и переключателей с помощью чистого CSS. Поэтому всякий раз, когда вы находите решение, которое показывает причудливую графику вместо стандартного флажка/переключателя, оно всегда строится как визуальная замена этим элементам. Это всегда включает в себя дополнительную разметку (в основном div) и в большинстве случаев также Javascript для имитации правильного поведения, включая возможность доступа к элементу при навигации с помощью клавиатуры.   -  person connexo    schedule 21.01.2015
comment
Ааа так в принципе нет способа. :( @Howli Мне особенно нужен эффект в показанном примере, и единственный способ сделать это - через div. Поскольку я не могу разбить контактную форму (которая действует иначе, чем простая HTML-форма), я не могу сделай это.   -  person sdesign    schedule 21.01.2015

Ответы (1)


arrow_upward
0
arrow_downward

пожалуйста, проверьте приведенную ниже кодовую вилку для пера.

http://codepen.io/Yeswanth-JG/pen/bNWyVd

<span class="slideone">
"..."
</span>

CSS 

.slideone {
        display: block;
     }
You should set display property to 'block' for the tags other than the tags which are block ones by default...

Итак, для первого слайда... я задал диапазон и отобразил в виде блока "Это работает!"..

ПРИМЕЧАНИЕ. Вы также можете указать отображение как встроенный блок, но с небольшой осторожностью... ll

person YaswanthJg    schedule 22.01.2015