連絡先フォーム7のラジオボタンはどのように編集できますか？

Question

このようなラジオボタンは通常編集しません。しかし、私はこの外観を達成する必要があります：http://i.imgur.com/KbJMWfn.png今のように見える：http://i.imgur.com/OFqifxk.png。サイトはここにあります：getnoble.bdanzer.comとフォームは、招待をリクエストをクリックしたときです。私はちょっと私がこれと一緒に行かなければならないところに考えや考えを少し失ってしまったのですか？

Answer 1

このあなたのための魔法を行う必要があります

HTML

<ul> 
    <li> 
    <input type="radio" id="f-option" name="selector"> 
    <label for="f-option">Android</label> 

    <div class="check"></div> 
    </li> 

    <li> 
    <input type="radio" id="s-option" name="selector"> 
    <label for="s-option">iPhone</label> 

    <div class="check"><div class="inside"></div></div> 
    </li> 

</ul> 

CSS

ul li{ 
    color: #AAAAAA; 
    display: block; 
    position: relative; 
    float: left; 
    width: 100%; 
    height: 100px; 
    border-bottom: 1px solid #111111; 
} 
ul li input[type=radio]{ 
    position: absolute; 
    visibility: hidden; 
} 

ul li label{ 
    display: block; 
    position: relative; 
    font-weight: 300; 
    font-size: 1.35em; 
    padding: 25px 25px 25px 80px; 
    margin: 10px auto; 
    height: 30px; 
    z-index: 9; 
    cursor: pointer; 
    -webkit-transition: all 0.1s linear; 
} 

ul li:hover label{ 
    color: #FFFFFF; 
} 

ul li .check{ 
    display: block; 
    position: absolute; 
    border: 1px solid white; 
    border-radius: 100%; 
    height: 25px; 
    width: 25px; 
    top: 30px; 
    left: 20px; 
    z-index: 5; 
    transition: border .1 linear; 
    -webkit-transition: border .1 linear; 
} 

ul li:hover .check { 
    border: 1px solid #FFFFFF; 
} 

ul li .check::before { 
    display: block; 
    position: absolute; 
    content: ''; 
    border-radius: 100%; 
    height: 15px; 
    width: 15px; 
    top: 5px; 
    left: 5px; 
    margin: auto; 
    transition: background .1s linear; 
    -webkit-transition: background .1s linear; 
} 

input[type=radio]:checked ~ .check { 
    border: 2px solid blue; 
} 

input[type=radio]:checked ~ .check::before{ 
    background: blue; 
} 

input[type=radio]:checked ~ label{ 
    color: white; 
} 

実施例https://codepen.io/anon/pen/LxJbJJ