Question

我在这里有点新鲜（实际上起初很害怕，但我真的似乎找不到令我满意的问题）。

这里的工作是添加另一行无线电彩色按钮，这要归功于一个按钮，而不必直接在代码中编写一大堆CSS和Html5（我的意思是没有复制粘贴，这很难看：D）< / p>

彩色无线电按钮栏基于此HTML代码：

 <form action="#">
    <div class="radio-toolbar">
                <input type="radio" class="Q1" id="radio1" name="radios" value="green">
                <label for="radio1"> </label>

                <input type="radio" class="Q1" id="radio2" name="radios"value="lgreen">
                <label for="radio2">  </label>

                <input type="radio" class="Q1" id="radio3" name="radios" value="orange">
                <label for="radio3">  </label>

                <input type="radio" class="Q1" id="radio4" name="radios" value="lred">
                <label for="radio4">  </label>

                <input type="radio" class="Q1" id="radio5" name="radios" value="red">
                <label for="radio5">  </label>

                <input type="radio" class="Q1" id="radio6" name="radios" value="white">
                <label for="radio6">  </label>

                <input type="radio" class="Q1" id="radio7" name="radios" value="black">
                <label for="radio7">  </label>
    </div>


        </form>

使用这个CSS：

.radio-toolbar input[type="radio"] {
    display:none;


}

.radio-toolbar input[type="radio"]:checked  + label {
    border: 2px solid blue;
}


.radio-toolbar label {
    display:inline-block;
    padding:4px 11px;
    font-family:Arial;
    font-size:16px;
}

.radio-toolbar input[id="radio1"]+ label {
        background-color:#006400;
        height: 110%;
        border: 1px solid #006400;
}

.radio-toolbar input[id="radio2"]+ label {
        background-color:#57D53B;
        border: 1px solid #57D53B;
}

.radio-toolbar input[id="radio3"]+ label {
        background-color:#FF8C00;
        border: 1px solid orange;
}

.radio-toolbar input[id="radio4"]+ label {
        background-color: #FF5E4D;
        border: 1px solid #FF5E4D;
}

.radio-toolbar input[id="radio5"]+ label {
        background-color:#FF0000;
        border: 1px solid red;
}

.radio-toolbar input[id="radio6"]+ label {
        background-color:#FFF;
        border: 1px solid black;

}

.radio-toolbar input[id="radio7"]+ label {
        background-color:#000;
        border: 1px solid black;
}

我知道，不是很有活力，而且很有初学者......

再次，工作将是在当前的一个（归类为“Q2”）下添加另一个栏，可以点击而不复制粘贴当前代码。没有复制粘贴是否可能？（一个人说一切皆有可能，但我们永远都不知道^^）

（对于好奇的人来说，答案现在存放在localStorage中，使用类属性和值）。

非常感谢未来的帮助：D

补充：安德鲁斯的问题让我觉得我不够清楚。我希望我可以复制整个无线电条（从绿色到黑色单选按钮）。颜色不会改变。这实际上是进行颜色投票，所以每个问题都会有这个标题。希望能帮忙！

动态添加彩色表格线

0 个答案: