重置输入[收音机]的CSS

问题描述 投票：0回答：4

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

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

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

css
4个回答
0
投票

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

这里的例子

<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中的单选按钮仍然是默认值

0
投票

请使用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()" />
0
投票

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

0
投票

下面是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;
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.