Question

我搜索但没有找到任何答案，我需要了解。我很喜欢css等。但我很快就学会了。我最近复制了一些代码（对我来说很遗憾，我不记得作者的名字），它使用纯css创建标签。标签代码使用无线电输入。因此，要隐藏无线电元素，作者执行了以下操作：

input[type="radio"] {
    position: absolute;
    top: -9999px;
    left: -9999px;
}

但稍后在我的代码中我需要一个标准的单选按钮（vanilla html），我不知道如何重置一个元素的样式。我可以使用一个花哨的CSS单选按钮，这看起来确实有用。但更大的问题是如何重置任何一个元素的值？我可以说“全部：初始;”没有办法。

Answer 1

请使用display: none隐藏元素。这种方法很糟糕。然后，您可以简单地不触及任何其他值，并将其记为：display: block。

您可以简单地执行以下操作：

<script type="text/javascript">
function toggleButton() {
    var e = document.getElementById("my_button");

    if (e.style.display === "none") {
        e.style.display = "block";
    } else {
        e.style.display = "none";
    }
}
</script>

<input type="radio" id="my_button" />
<input type="submit" onclick="toggleButton()" />

Answer 2

感谢＆＃34; display：block和display：none＆＃34;特技。我肯定会在将来使用。也就是说，我确实找到了解决问题的方法。实际上，我不知道为什么我之前没有想到它（但那时我不会对上述技巧有所了解）。我去了W3站点并找到了单选按钮，并使用了chromes开发工具以标准方式发现了css的使用。我刚刚添加了所有标准的东西并且它起作用了。我不确定这是完成它的最有效方法，但确实有效。至少我可以再次看到圆圈！

Answer 3

不确定我理解你但是如果你想用自定义和默认样式制作不同的单选按钮我建议你给这些单选按钮包装提供不同的类

这里的例子是

<form action="#" class=form-1>
  <p>
    <input type="radio" id="test1" name="radio-group" checked>
    <label for="test1">Apple</label>
  </p>
  <p>
    <input type="radio" id="test2" name="radio-group">
    <label for="test2">Peach</label>
  </p>
  <p>
    <input type="radio" id="test3" name="radio-group">
    <label for="test3">Orange</label>
  </p>
</form>

<form action="#" class=form-2>
  <p>
    <input type="radio" id="test1" name="radio-group" checked>
    <label for="test1">Apple</label>
  </p>
  <p>
    <input type="radio" id="test2" name="radio-group">
    <label for="test2">Peach</label>
  </p>
  <p>
    <input type="radio" id="test3" name="radio-group">
    <label for="test3">Orange</label>
  </p>
</form>

https://codepen.io/anon/pen/MQLbdM

我从另一个例子中分出来，向你展示我的意思

有两种形式。我只定制了FORM-1中的单选按钮（参见css）

但FORM-2中的单选按钮仍为默认

Answer 4

下面是下面的css .tab-content我需要不受标签代码的影响（我希望能够使用标签标签，而不是标签看起来像标签，我想要单选按钮按钮和文字是正常的）

*, *:after, *:before {
    box-sizing: border-box;
}

body {
    padding: 0;
    margin: 0;
    font-family: 'Arial', sans-serif;
    min-width:1470px;        /* Suppose you want minimum width of 1000px */
    width: auto !important;  /* Firefox will set width as auto */
    background: #eee;

}
div.pes_header{  
    display: inline-block;     
    height: 100%;
    width: 100%;
    background: linear-gradient( limegreen,transparent ),
                linear-gradient(90deg,skyblue, transparent),
                linear-gradient(-90deg, coral, transparent);
    background-size: cover;
    background-size: contain;
    /* -webkit-background-size: cover; */
    background-blend-mode: no-repeat;   
}

.page-wrap {
    width: 98%;
    margin: 0 auto;
}

h1 {
    font-size: 1rem;
    font-weight: bold;
    padding: 0;
    margin: 20px 0;
    color: #fff;
    text-align: center;
}

textarea {
    font-size: 1rem;
    line-height: 1.5rem;
}

input[type="radio"] {
    position: absolute;
    /* top: -9999px;
    left: -9999px; */
    display:none;
}

.tab-wrap  {
      width: 100%;
      float: none;
      list-style: none;
      position: relative;
      margin: 0 auto;
      padding: 0;
      text-align: left;
}

.tab-wrap li {
  float: left;
  display: block;
}

.tab-wrap  label  {
  position: relative;
  display: inline-block;
  padding: .5em .5em .5em;
  color: inherit;
  text-decoration: none;
  margin: 0 10px 0 0px;
}


.label-1 {
    z-index: 100;
}

.label-2 {
    z-index: 90;
}


.label-3 {
    z-index: 80;
}
.label-4 {
    z-index: 80;
}
.label-5 {
    z-index: 80;
}
.label-6 {
    z-index: 80;
}
.label-7 {
    z-index: 80;
}
.label-8 {
    z-index: 80;
}
.label-9 {
    z-index: 80;
}

.tab-wrap label:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 10px;
    left: 0;
    z-index: -1;
    border: .1em solid #aaa;
    border-bottom: none;
    border-radius: 10px 10px 0 0;
    /* background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(229,229,229,1)));
    background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%);
    background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(229,229,229,1) 100%); */
    background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%);

    /* -webkit-transform: perspective(5px) rotateX(2deg); */
        transform: perspective(5px) rotateX(2deg);

    /* -webkit-transform-origin: left;
        -ms-transform-origin: left; */
            transform-origin: left;
}

.tab-wrap .tab-content {
    z-index: 200;
    display: none;
    overflow: hidden;
    width: 100%;
    position: absolute;
    top: 25px;
    left: 0;
    padding: 0, 10px ,20px, 20px;
    background: #fff;
    border-radius: 3px;
    border: .1em solid #aaa;
    border-top: 0;

}

.tab-wrap [id^="tab"]:checked + label {
    z-index: 200;
    margin-bottom: -1px;
    border-top-width: 1px;
}

.tab-wrap [id^="tab"]:checked + label:before {
    /* background: #baebb0; */
    background: linear-gradient( limegreen,transparent ),
                linear-gradient(90deg,skyblue, transparent),
                linear-gradient(-90deg, coral, transparent);
    background-size: cover;
    background-size: contain;
    /* -webkit-background-size: cover; */
    background-blend-mode: no-repeat;  
}

.tab-wrap [id^="tab"]:checked ~ .tab-content{
    display: block;
}

重置输入[收音机]的CSS

4 个答案: