フォーム内のオプションとして画像を使用する方法

Question

最新のBootstrap v4.0ベータ版を使用して、アカウントを作成するためのフォームを作成しようとしています。

この例では、ユーザーに男性または女性を選択させたい場合は、ドロップダウンまたはラジオボタンの代わりにイメージを使用しようとしています。

<div class="form-group"> 
    <label for="exampleFormControlSelect1">Example select</label> 
    <select class="form-control" id="exampleFormControlSelect1"> 
     <option style="background-image: url(images/male.png);">Male</option> 
     <option style="background-image: url(images/female.png);">Female</option> 
    </select> 
</div> 

私は画像クラスとして使用しようとしましたが、画像を送信ボタンとして扱いました。

男性または女性のボタンをセレクタとして選択する方法はありますか？

Answer 1

このタイプのフォームコントロールでは、ラジオボタンを使用する必要があります。ユーザーが選択できるのは1つだけです。

無線入力を使用し、ブートストラップクラスsr-onlyを使用して無線入力を非表示にすると、これを非常に簡単に行うことができます。その後、

が

label { 
 
    cursor: pointer; 
 
    filter: grayscale(100%); 
 
} 
 

 
label:hover { 
 
    filter: grayscale(0); 
 
} 
 
input[type="radio"]:checked + label { 
 
    filter: grayscale(0); 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<fieldset> 
 
    <legend> 
 
    Please select gender 
 
    </legend> 
 
    <input type="radio" name="gender" class="sr-only" id="male"> 
 
    <label for="male"> 
 
    <img src="http://findicons.com/files/icons/1688/web_blog/48/user_male_white_red_brown.png" alt="male"> 
 
    </label> 
 
    <input type="radio" name="gender" class="sr-only" id="female"> 
 
    <label for="female"> 
 
    <img src="http://findicons.com/files/icons/1688/web_blog/48/user_female_white_pink_black.png" alt="female"> 
 
    </label> 
 
</fieldset>

（私はオプションがそのように選択し、ニーズに合わせてそれを変更すること自由に感じているときに表示するためにいくつかのランダムなCSSを追加しました）ラベルにあなたのイメージやスタイルを適用します