Html 如何自定义样式图像和单选按钮?
如何使用单选按钮和图像制作类似的网页 在这篇文章中,我制作了一个标签,并添加了一个单选按钮、一个图像标签和一个垃圾名称。然后我试着用bootstrap设置它的样式 Html:Html 如何自定义样式图像和单选按钮?,html,css,reactjs,twitter-bootstrap,react-bootstrap,Html,Css,Reactjs,Twitter Bootstrap,React Bootstrap,如何使用单选按钮和图像制作类似的网页 在这篇文章中,我制作了一个标签,并添加了一个单选按钮、一个图像标签和一个垃圾名称。然后我试着用bootstrap设置它的样式 Html: <div> <h2> Choose Accomodation Type </h2> <div > <label className="btn">
<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>
为您的输入添加标签。
添加可见性:为输入隐藏。
在标签内放置一个div并开始设置样式。您可以使用:checked伪类来查看是否选中了单选按钮。
HTML
现在,单击包含自定义div的标签后,将选中单选按钮。您好,欢迎来到Stackoverflow!你能告诉我们到目前为止你都做了些什么吗?您可以通过编辑问题来包含代码。Stackoverflow要求您先尝试一些东西,然后带着特定的问题返回。祝你好运!嗨,对不起,我是新来的。我将添加我的代码。谢谢你指出这一点
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;
}
<label for="my-btn">
<div></div>
</label>
<input id="my-btn" type="radio"/>
input {
visibility: hidden;
}
div {
/* custom styles */
}
input:checked div {
/* custom styles */
}