标签输入型收音机

时间:2016-08-28 18:23:26

标签: html css

我正在尝试css输入类型单选按钮,但它不起作用。问题是输入标签在label标签内,我无法改变它。

input{
  display:none;
}


label:before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 10px;
    bottom: 1px;
    background-color: #aaa;
    box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);

}
input[type=radio]:checked + label:before {
    content: "\2022";
    color: #f3f3f3;
    font-size: 30px;
    text-align: center;
    line-height: 18px;
}
<label for="female"><input id="female" type="radio" name="gender" value="female">Female</label>

3 个答案:

答案 0 :(得分:1)

&#13;
&#13;
.control{
    vertical-align: middle;
    display: inline-block;
}
input{
    margin-right: 10px;
}
input:before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-left: -1px;
    background-color: #aaa;
    box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
}

input[type=radio]:checked:before {
    content: "\2022";
    color: #f3f3f3;
    font-size: 30px;
    text-align: center;
    line-height: 18px;
}
&#13;
<input id="female" class="control" type="radio" name="gender" value="female">
<label for="female" class="control">
Female</label>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

你必须有一个内部替代输入,因为+只选择同一级别的下一个元素。

&#13;
&#13;
input{
  display:none;
}


span:before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 10px;
    bottom: 1px;
    background-color: #aaa;
    box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);

}
input[type=radio]:checked + span:before {
    content: "\2022";
    color: #f3f3f3;
    font-size: 30px;
    text-align: center;
    line-height: 18px;
}
&#13;
<label for="female">
  <input id="female" type="radio" name="gender" value="female">
  <span for="female"></span>
  Female
</label
&#13;
&#13;
&#13;

答案 2 :(得分:0)

请尝试将您的标签放在echo "Choose your browser" echo "1) Safari" echo "2) Chrome" echo read -sn1 choice while true do case $choice in [1]) BROWSER="SAFARI" while true do url="$(osascript -e 'tell app "Safari" to tell the current tab of window 1 to get the url as text' 2>&1 | grep -v 'execution error')" if [[ $url = '' ]]; then echo "Now exiting" && exit; fi SET_VARIABLES while true do current_url="$(osascript -e 'tell app "Safari" to tell the current tab of window 1 to get the url as text' 2>&1 | grep -v 'execution error')" SURF if [[ $current_url = '' ]]; then echo "Now exiting" && exit; fi done | awk '!seen[$0]++ { print; fflush() }' | tee -a $file done break ;; [2]) BROWSER="CHROME" while true do url="$(osascript -e 'tell app "Google_Chrome" to tell the active tab of window 1 to get the url as text' 2>&1 | grep -v 'error')" if [[ $url = '' ]]; then echo "Now exiting" && exit; fi SET_VARIABLES while true do current_url="$(osascript -e 'tell app "Google_Chrome" to tell the active tab of window 1 to get the url as text' 2>&1 | grep -v 'error')" SURF if [[ $current_url = '' ]]; then echo "Now exiting" && exit; fi done | awk '!seen[$0]++ { print; fflush() }' | tee -a $file done break ;; *) echo 'Invalid Selection' exit ;; esac done

之后
input:radio