如何自定义样式图像和单选按钮？ [关闭]答案

【问题标题】：How to custom style images and radio buttons? [closed]如何自定义样式图像和单选按钮？ [关闭]
【发布时间】：2019-07-10 10:44:32
【问题描述】：

如何使用单选按钮和图片制作类似的网页？

在此，我制作了一个标签和 din，我为该名称添加了一个单选按钮、一个图像标签和垃圾邮件。然后我尝试使用引导程序对其进行样式设置。

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;
}

【问题讨论】：

您好，欢迎来到 Stackoverflow！你能告诉我们你到目前为止所做的尝试吗？您可以通过编辑您的问题来包含您的代码。 Stackoverflow 要求您先尝试，然后再提出具体问题。祝你好运！
嗨，对不起，我是 stackoverflow 的新手。我将添加我的代码。感谢您指出这一点

标签： html css reactjs twitter-bootstrap react-bootstrap

【解决方案1】：

为您的输入添加标签。
为输入添加visibility: hidden。
在标签内放置一个 div 并开始设置样式。可以使用:checked伪类查看单选按钮是否被选中。

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 */
}

现在单击包含自定义 div 的标签后，将选中单选按钮。

【讨论】：