3
私は同じ方法ですべてのラジオボタンを置き換えるためにCSSを使用する方法を理解しようとしています。入力の場所に関係なく、これらのラジオボタンを動作させるためにCSSを使用することは可能ですか？私は行や何かを調整する必要はありません。ちょうどラジオボタンをつかんで、以下の例のようにそれをcssしてください。ラジオボタンCSS
body {
background-color: white;
margin: 0;
padding: 0;
}
input[type='radio'] {
display: none;
}
.radio {
border: 1px solid #b3b4b4;
border-radius: 50%;
box-sizing: border-box;
cursor: pointer;
display: block;
float: left;
height: 16px;
margin: 10px 10px 0 0;
padding: 10px;
position: relative;
width: 16px;
}
.row:hover .radio {
border: 2px solid #218996;
}
input[type='radio']:checked + .radio {
background-color: #218996;
border: 2px solid #218996;
}
input[type='radio']:checked + .radio::before {
content: "✓ ";
position: absolute;
color: white;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-size:
}
.row {
border-bottom: 1px solid #dcdcdc;
padding: 0 5px;
}
.row label {
display: inline-block;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
font-weight: bold;
}
.row > label:last-child {
padding: 12px 0;
width: calc(100% - 50px);
cursor: pointer;
}<form name="titleTypes" id="titleTypes" method="post" action="process.cfm">
<div>
<!---Label is here for placement of error message--->
<label for="rgroup" class="error" style="display:none;">Please choose one.</label>
</div>
<div class='row'>
<input id="one" type="radio" name="rgroup" value="MV/titleTypeMV.cfm" />
<label for="one" class='radio' tabindex='1'></label>
<label for="one">MOTOR VEHICLE/TRAVEL TRAILER TITLE</label>
</div>
<div class='row'>
<input id="two" type="radio" name="rgroup" value="MH/mobileHome.cfm" />
<label for="two" class='radio' tabindex='1'></label>
<label for="two">MOBILE HOME</label>
</div>
<div class='row'>
<input id="three" type="radio" name="rgroup" value="BOAT/boat.cfm" />
<label for="three" class='radio' tabindex='1'></label>
<label for="three">VESSEL</label>
</div>
<div class='row'>
<input id="four" type="radio" name="rgroup" value="DUPL/duplicate.cfm" />
<label for="four" class='radio' tabindex='1'></label>
<label for="four">DUPLICATE</label>
</div>
<div>
<button class="btn-u" type="submit" name="submit" id="submitBtn" class="submitBtn"><i></i>Next</button>
</div>Iは、入力ラジオはただ単にクラスを呼び出すことにより、テーブルまたは任意の場所に存在するかどうかをこれらのラジオボタンとして正確に働くことができるようにしたいです。これは可能ですか？
はい、それは可能です。あなたが望むものの例を持っていますので、私たちはあなたにそれを行う方法を示すことができますか？ –
私は私が望むものの私の例として上記のCSSを投稿しました –
私の例ではラジオボタンが上のように機能するようにしたいのですが、どこでも動作します。上記をテーブルで使用しようとすると、ラジオボタンが壊れます。どのように私はユニバーサルを行うことができます参照しようとしている –