表单标签和单选按钮的背景色
我已经建立了一个表单，允许用户按日期、Asc或Desc排序。
到目前为止，我已经找到了让用户：
1） 选择一个单选按钮。
2）提交后保留单选按钮。
3） 向所选用户显示书面信息。
HTML/PHP代码：
<p>Sort by Date:</p>
<form action="" method="post" class="date">
<input type="radio" name="dateorder" onclick="javascript:submit()" value="ascending" <?php if (isset($_POST['dateorder']) && $_POST['dateorder'] == 'ascending') echo ' checked="checked"';?> /> <label for="ascending">Newset › Oldest</label><br><br>
<input type="radio" name="dateorder" onclick="javascript:submit()" value="descending" <?php if (isset($_POST['dateorder']) && $_POST['dateorder'] == 'descending') echo ' checked="checked"';?> /> <label for="descending">Oldest › Newset</label>
</form>
<?php
if (isset($_POST['dateorder'])){
echo "Date Order: " . $_POST['dateorder'];
}
?>
我想通过在选择时添加颜色背景，直观地显示用户的选择。背景色应横跨单选按钮和标签。这在CSS中是可能的吗？到目前为止，这是我所拥有的，只有标签使用了颜色/样式：
<head>
<title>Practice Radio Buttons</title>
<style type="text/css">
p{font-weight: bold;}
form input[type="radio"]:checked + label{
background-color: yellow;
padding: 10px;
border-radius: 5px;}
</style>
</head>
共有3个答案
你在找这样的东西吗？
label {
padding-left: 2rem;
}
input[type=radio] {
position: relative;
right: -1.5rem;
}
input[type=radio]:checked + label {
background: red;
color: white;
}<input type="radio"><label>i'm label text</label>
您可以实现您所寻找的，不是通过实际样式化单选按钮，而是通过玩弄标签的定位（以及填充和z-index）。
- 将
位置：相对应用于两个元素
现在每个标签的左侧在其单选按钮下方。
因此，当您单击单选按钮时，高亮背景现在将环绕单选按钮及其标签文本。
e. g.
label, input[type="radio"] {
position: relative;
display:inline-block;
}
input[type="radio"] {
z-index: 12;
}
label {
z-index: 6;
padding: 10px;
padding-left: 40px;
margin-left: -30px;
border-radius: 5px;
}
input[type="radio"]:checked + label {
background-color: yellow;
}<form action="" method="post" class="date">
<h2>Sort by Date:</h2>
<input type="radio" name="dateorder" id="ascending" value="ascending" />
<label for="ascending">Newest › Oldest</label>
<br><br>
<input type="radio" name="dateorder" id="descending" value="descending" />
<label for="descending">Oldest › Newest</label>
</form>
-
本文向大家介绍Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值问题，包括了Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值问题的使用技巧和注意事项，需要的朋友参考一下 Vue.js可以很方便的实现数据双向绑定，所以在处理表单，人机交互方面具有很大的优势。下面给大家介绍Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值问题。 摘要: 表单标签取值问题中，单选按钮、复选按钮
-
下面是使用引导模板的单选按钮组的代码片段。但我试图做的是每次切换选项时更改单选按钮的类部分（即选中单选按钮时，标签类将为“btn btn primary”，如果未选中，标签类将为“btn btn default”）。有人知道如何做到这一点吗？
-
问题内容： 是否可以将css（3）样式应用于选中的单选按钮的标签？ 我有以下标记： 我希望的是 会做某事，但是可惜它没有（我预期的那样）。 是否有一个选择器可以实现这种功能？如果有帮助，您可以将divs围起来，但是最好的解决方案是使用标签“ for”属性。 应该注意的是，我能够为我的应用程序指定浏览器，所以请最好使用css3等类。 问题答案： 尝试符号：它是相邻的同级组合器。它结合了两个具有相同父
-
问题内容： 我正在使用一个struts单选标记，其中填充了具有两个字段的对象列表： 这是我在页面上用来显示单选按钮列表的内容 但是，这会产生单选按钮的水平列表。我尝试向他们添加CSS样式： 但这会导致标签和单选按钮也显示在单独的行上，而不是单选按钮和标签在同一行上显示： 第一个对象 第二个对象 第三对象 我想要的是： 第一个对象 第二个对象 第三对象 问题答案： 它实际上很简单，我的意思是使用主题
-
问题内容： 为什么我的标签和单选按钮不会停留在同一行，该怎么办？ 这是我的表格： 问题答案： 如果您使用的是我在此问题中提出的HTML结构，则只需将标签浮动并输入到左侧，然后调整填充/边距，直到所有内容对齐为止。 是的，您需要使单选按钮具有旧IE的类名。并有 所有 他们在同一行，据我连接到上面的标记，它会像这样：
-
这是一个 列表 拓展，可以用来创建单选和复选按钮组。 复选按钮组 <div class="list-block"> <ul> <!-- Single chekbox item --> <li> <label class="label-checkbox item-content"> <!-- Checked by default -->