Форма для контактов 7 кнопок радио - PullRequest
Новая
       19

Форма для контактов 7 кнопок радио

0 голосов
/ 26 октября 2018

Я пытаюсь стилизовать переключатели, сгенерированные плагином Contact Form 7 для WordPress.Все примеры, которые я видел, опирались на метку с параметром for="", например: 

<input type="radio" id="this-button" name="test-button">
<label for="this-button">Click Me</label>

Но кнопки, сгенерированные CF7, не позволяют вам добавить это for=""параметр.На странице это выглядит так: 

<label>
    <span class="wpcf7-list-item-label">Yes</span>
    <input type="radio" id="yes" name="yes-button" value="Yes">
</label>

Мне все еще нужны пользовательские переключатели, но есть ли другой способ сделать это, который не зависит от параметра for=""?jQuery уже загружается на страницу, поэтому я могу использовать решение jQuery.

Любая помощь будет отличной, я попробовал несколько решений, но безуспешно.

Ответы [ 3 ]

0 голосов
/ 27 октября 2018

Вы можете использовать этот плагин, он прост в использовании и вы можете придать новый вид вашей контактной форме https://wordpress.org/plugins/material-design-for-contact-form-7/

0 голосов
/ 29 октября 2018

Вот что у меня получилось:

Я установил " Checkator ", затем добавил: 

//Add "checkator" class
$( document ).ready(function() {
    $(".my-page label > input").addClass("checkator");
});

... вверху fm.checkator.jquery.js чтобы добавить CSS-класс "checkator" к переключателям.

Ручное применение класса CSS к переключателям позволило Checkator найти их, и оттуда я смог их стилизовать по мере необходимости.

0 голосов
/ 26 октября 2018

вы пытались добавить класс к одной из кнопок-переключателей, подобных: 

   <label class="container">One
   <input type="checkbox" checked="checked">
   <span class="checkmark"></span>
   </label>

Вы должны иметь возможность добавлять собственные классы даже через WordPress или получить плагин CSS, чтобы позволить вам добавлять пользовательские CSS.

https://www.w3schools.com/howto/howto_css_custom_checkbox.asp - отличный ресурс.

1010 * -Роберт *

...