php - 表单标签和单选按钮的背景颜色-6ren

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

转载作者：行者123 更新时间：2023-12-02 21:00:18

25

4

我设置了一个表单，允许用户按日期、升序或降序排序。

到目前为止，我已经弄清楚如何让用户:

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>

最佳答案

您可以实现您想要的目标，不是通过实际设计单选按钮的样式，而是通过调整定位(以及 padding 和 z-index) 标签。

将 position:relative 应用于两个元素；
确保每个单选按钮的 z-index 高于其标签；
向标签应用一个负数 margin-left 值(向左移动)；
向标签应用一个正 padding-left值(将标签文本向右移动)；

现在，每个标签的左侧位于其单选按钮下方。

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

例如

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 &rsaquo; Oldest</label>

<br><br>

<input type="radio" name="dateorder" id="descending" value="descending" />
<label for="descending">Oldest &rsaquo; Newest</label>

</form>

关于php - 表单标签和单选按钮的背景颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38657489/

25

4

0

文章推荐： php json-schema - fatal error : Class not found

首页

博学

6Ren·AI

商城

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

标签)？
根据 Web 标准，创建带有标题 1 的链接的正确代码是什么？是吗 stackoverflow 或 stackoverflow 谢谢最佳答案根据网络标准，您不能将 block 元素放入内

首页

博学

6Ren·AI

商城

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

标签)？ 根据 Web 标准，创建带有标题 1 的链接的正确代码是什么？ 是吗 stackoverflow 或 stackoverflow 谢谢 最佳答案 根据网络标准，您不能将 block 元素放入内

标签)？
根据 Web 标准，创建带有标题 1 的链接的正确代码是什么？是吗 stackoverflow 或 stackoverflow 谢谢最佳答案根据网络标准，您不能将 block 元素放入内