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

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

来源

2016-07-29 Andy R

'A + B'选择风格只有'B'，不'了'太。另外，造型单选按钮是非常困难的。这些天大多数风格的单选按钮都是伪单选按钮（很多技巧 - 谷歌它）。最简单的方法是将输入和标签放入一个容器中，并给出一个背景，而不是元素本身。 – Utkanos

好的，谢谢Utkanos，像div或其他东西。试试看我怎么走。 –

要改变背景颜色，当然CSS是你可能需要的一件，但也有$（yourstuff）.css（“background-color”，“yellow”）的jQuery;和“.click（change（）” –

你可以实现你在找什么，而不是实际的造型单选按钮，但通过与label的定位（和padding和z-index）玩耍。

将position:relative应用于这两个元素;
确保每个单选按钮具有比其标签更高的z-index;
适用于label a 负数margin-left数值（左移）;
适用于label a 正面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; Newset</label> 
 

 
</form>

来源

2016-07-29 12:39:02 Rounin

真的很酷，Rounin，在那里有很好的横向思维。非常感谢;-) –

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

喜欢的东西

<style type="text/css"> 

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

来源

2016-07-29 11:45:50 Alessandro

谢谢@Alessandro。我尝试过了，但它不是我正在寻找的。当用户单击单选按钮选项时，背景颜色应该会改变。 –

您正在寻找这样的事情？

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>

来源

2016-07-29 12:41:24 VilleKoo

感谢localZero，将您的答案标记为有用。 –

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

回答

相关问题