Question

我已经设置了一个允许用户按日期排序的表单，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 &rsaquo; 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 &rsaquo; 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>

Answer 1

您可以实现您正在寻找的内容，而不是通过实际设置单选按钮的样式，而是通过使用{{1}的定位（以及padding和z-index）来实现}。

将label应用于这两个元素;
确保每个单选按钮的标签高于position:relative;
适用于z-index 否定 label值（向左移动）;
适用于margin-left 正面 label值（将标签文字向右移动）;

现在每个标签的左侧是下方的单选按钮。

因此，当您单击单选按钮时，高亮背景将围绕单选按钮和其标签文本。

<强> e.g。

＆＃13;

padding-left

＆＃13;

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

＆＃13;

Answer 2

你在找这样的东西吗？

＆＃13;

label {
  padding-left: 2rem;
}

input[type=radio] {
  position: relative;
  right: -1.5rem;
}

input[type=radio]:checked + label {
   background: red;
   color: white;
}

＆＃13;

<input type="radio"><label>i'm label text</label>

＆＃13;

Answer 3

您是否尝试过悬停选择器？

像

这样的东西

<style type="text/css">

label:hover { 
    background-color: yellow;
    }
</style>

表格标签和单选按钮的背景颜色

3 个答案: