表單標籤和單選按鈕的背景顏色

我已經設置了一個表單，允許用戶按日期，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，將您的答案標記爲有用。 –

表單標籤和單選按鈕的背景顏色

回答

相關問題