How to custom style images and radio buttons? [closed] - html

Question

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
How to use radio button and images to make a similar webpage?
In this, I have made a label and din that I have added a radio button, an image tag, and spam for the name. Then I tried styling it using bootstrap.
Html:
<div>
<h2> Choose Accomodation Type </h2>
<div >
<label className="btn">
<input type="radio" name="test" id="option1" autocomplete="off" checked />
<img src={appartment} />
<span class="checkmark"></span>
<p>Apartment</p>
</label>
<label className="btn">
<input type="radio" name="test" id="option1" autocomplete="off" checked />
<img src={house} />
<span class="checkmark"></span>
<p>house</p>
</label>
</div>
<div>
<button className="btn btn-light btn-lg"> Cancel</button>
<button className="btn btn-outline-primary btn-lg"> Next </button>
</div>
img {
width:150px;
height: 150px;
margin:30px;
padding: 20px;
}
.btn{
margin: 15px;
padding: 5px;
}
[type=radio] {
margin:0;padding:0;
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
}

Answer 1

Add a label for your input.
Add visibility: hidden for the input.
Put a div inside the label and start styling. You can use :checked pseudo class to see if the radio button is selected.
HTML
<label for="my-btn">
<div></div>
</label>
<input id="my-btn" type="radio"/>
CSS
input {
visibility: hidden;
}
div {
/* custom styles */
}
input:checked div {
/* custom styles */
}
Now once you click on the label which contains your customized div, the radio button will be checked.