Styling radio button

左心房为你撑大大i 提交于 2019-12-29 00:45:09

问题


Here is my webpage

I'm trying to make bigger radio buttons, without any luck.

It's a custom WP plugin and the owner doesn't support users for these kind of questions. I tried to follow many tutorials like this one, but the code structure generally is different:

My code is

<li class="wpProQuiz_questionListItem" data-pos="1">
   <span style="display:none;">1. </span>
   <label>
      <input class="wpProQuiz_questionInput" type="radio" name="question_1" value="323"/>
      Answer 1
   </label>
</li>

and in tutorials code is presented as

<td>
  <input type="radio" name="radiog_dark" id="radio1" class="css-checkbox" />
  <label for="radio1" class="css-label radGroup2">Option 1</label>
</td>

Can someone help me?

Riccardo


回答1:


The HTML markup:

<ul>
    <li>
        <label>
            <input class="wpProQuiz_questionInput" type="radio" name="question_1_2" value="3" />
            <span class="graphical-radio"></span>
            Non riesco a lasciarlo solo
        </label>
    </li>
</ul>

The CSS:

input[type="radio"] {
    display: none;
}

.graphical-radio {
    background: gray;
    display: inline-block;
    width: 30px;
    height: 30px;
    border-radius: 100%;
}

input[type="radio"]:checked + .graphical-radio {
    background: red;
}

The magic is with :checked selector, so you can style the graphical-radio as you want.

jsFiddle Demo.




回答2:


Form element styling is almost impossible to do cross-browser. I would go for a custom designed element which reflects the state of a hidden checkbox using javascript.



来源:https://stackoverflow.com/questions/25590269/styling-radio-button

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!