Fatal编程技术网
  • php/
  • Php 表单标签和单选按钮的背景色

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

php html css

Php 表单标签和单选按钮的背景色,php,html,css,Php,Html,Css,我已经建立了一个表单，允许用户按日期、Asc或Desc排序 到目前为止，我已经找到了让用户： 1） 选择一个单选按钮 2） 提交后保持单选按钮处于选中状态 3） 向所选用户显示书面信息 HTML/PHP代码： <p>Sort by Date:</p> <form action="" method="post" class="date"> <input type="radio" name="dateorder" onclick="j

我已经建立了一个表单，允许用户按日期、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'];
        }
    ?>

按日期排序：

/>最古老的&rsaquo；新闻集
我想通过在选择时添加颜色背景，直观地显示用户的选择。背景色应横跨单选按钮和标签。这在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>


练习单选按钮
p{字体大小：粗体；}
表单输入[type=“radio”]：选中+标签{
背景颜色：黄色；
填充：10px；
边界半径：5px；}
您是否尝试了悬停选择器

差不多

<style type="text/css">

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


标签：悬停{
背景颜色：黄色；
}
你可以实现你想要的，不是通过实际设计单选按钮的样式，而是通过玩弄
标签的定位（和
填充
和
z-index
）


  • 将
    位置：相对
    应用于两个元素

  • 确保每个单选按钮的z索引高于其标签

  • 应用于
    标签
    负数
    左边距
    值（将其向左移动）

  • 应用于
    标签
    正向的
    左填充
    值（将标签文本向右移动）
现在，每个标签的左侧位于其单选按钮下方
    
因此，当您单击单选按钮时，高亮背景现在将环绕单选按钮及其标签文本
    
例如
    

标签，输入[type=“radio”]{
位置：相对位置；
显示：内联块；
}
输入[type=“radio”]{
z指数：12；
}
标签{
z指数：6；
填充：10px；
左侧填充：40px；
左边距：-30px；
边界半径：5px；
}
输入[type=“radio”]：选中+标签{
背景颜色：黄色；
}
    • 

    
按日期排序：
最新&rsaquo；最老的


    
最古老的&rsaquo；最新的

    你在找这样的东西吗
    


    标签{
左：2rem；
}
输入[类型=收音机]{
位置：相对位置；
权利：-1.5雷姆；
}
输入[类型=收音机]：选中+标签{
背景：红色；
颜色：白色；
}
    

    i'm label text
    a+b
    选择器样式仅
    b
    ，不
    a
    。此外，单选按钮的设计难度也是众所周知的。现在大多数样式的单选按钮都是伪单选按钮（这方面有很多技巧-谷歌it）。最简单的方法是将输入和标签放在一个容器中，并给它一个背景，而不是元素本身。好的，谢谢Utkanos，比如div之类的。要改变背景色，当然CSS是您可能需要的一部分，但jQuery也需要$（yourstuff.CSS（“背景色”，“黄色”）；和“.click（change（）”是的，只是看到了这一点，没有jQuery的线索。我将如何用我所拥有的代码来编写它。我遇到了这段代码，应该如何应用它？感谢您的帮助：$（文档）。就绪（function（）{$（'input:radio'）。change（function（）{$（this.closest（'div'）。toggleClass（'highlight'）；}）；）；谢谢@Alessandro。我试过了，但不是我想要的。当用户单击单选按钮选项时，背景颜色应该会改变。真的很酷，鲁宁，横向思维很好。非常感谢；-）