CSS - 更改父DIV上輸入檢查

.chk-circle { 
 
    \t width: 8px; 
 
    \t height: 8px; 
 
    \t background: #afb0b5; 
 
    \t border-radius: 100%; 
 
    \t position: relative; 
 
    \t float: left; 
 
    \t margin-top: 4px; 
 
    \t margin-right: 8px; 
 
    } 
 
    
 
    .chk-circle label { 
 
    \t display: block; 
 
    \t width: 4px; 
 
    \t height: 4px; 
 
    \t border-radius: 100px; 
 
    \t cursor: pointer; 
 
    \t position: absolute; 
 
    \t top: 2px; 
 
    \t left: 2px; 
 
    \t z-index: 1; 
 
    \t background: #fff; 
 
    } 
 
    
 
    .chk-hide { 
 
     visibility: hidden; 
 
    } 
 

 
    .chk-circle input[type=checkbox]:checked + label { 
 
    \t background: #63a70a; 
 
    }

\t <div class="chk-circle"> 
 
     <input class="chk-hide" type="checkbox" id="chk1"/> 
 
\t <label for="chk1"></label> 
 
    \t </div>

背景顏色將會產生如下：

我想要做的是有外圓變綠時輸入檢查，我已經嘗試了以下但發生相反：

來源

2016-11-04 Lee

嘗試添加顏色的邊界？ – weinde

不要濫用那樣的'標籤'。對於您顯示的示例，標籤元素應包含複選框旁邊寫的文本。 – CBroe

嘗試border-color屬性：

.chk-circle input[type=checkbox]:checked + label { 
    border-style: solid; 
    border-color: #0f0; 
}

來源

2016-11-04 09:39:57

試試這個：

應用與border屬性：

更新

我加入了i的子彈創作。如果y ou需要增加子彈大小，增加I標籤的width & height。並且還在標籤中添加了文字。這兩個條件正在

.chk-circle input[type=checkbox]:checked + i { 
     top:0; 
     left:0; 
     border:2px solid green; 
    }

.chk-circle > i { 
 
    position:relative; 
 
    float:left; 
 
    display: block; 
 
    width: 6px; 
 
    height: 6px; 
 
    margin-top:5px ; 
 
    border-radius: 100px; 
 
    cursor: pointer; 
 
    z-index: 1; 
 
    border:3px solid #ddd; 
 
    background: #fff; 
 
    cursor:pointer; 
 
} 
 

 
.chk-circle > label{ 
 
    cursor:pointer; 
 
    margin:0 10px auto; 
 
    
 
} 
 
.chk-hide { 
 
    visibility: hidden; 
 
} 
 
.chk-circle > input[type=checkbox]:checked + i{ 
 
    border:3px solid green; 
 
}

<div class="chk-circle"> 
 
    <label for="chk1">some 1</label> 
 
    <input class="chk-hide" type="checkbox" id="chk1"/> 
 
<i></i> 
 
</div> 
 
<div class="chk-circle"> 
 
    <label for="chk2">some 2</label> 
 
    <input class="chk-hide" type="checkbox" id="chk2"/> 
 
<i></i> 
 
</div> 
 
<div class="chk-circle"> 
 
    <label for="chk3">some 3</label> 
 
    <input class="chk-hide" type="checkbox" id="chk3"/> 
 
<i></i> 
 
</div>

來源

2016-11-04 09:41:47 prasanth

會很好，如果你添加一些文字到標籤，或者做一個更大的子彈，因爲它很難點擊它 – arhak

看到我的更新回答它應該足夠你 – prasanth

div { 
 
    background: pink; 
 
    width: 50px; 
 
    height:50px; 
 
} 
 
input[type=checkbox]:checked+div{ 
 
    background: green; 
 
} 
 

 
input[type=checkbox]:checked + div p { 
 
    background: blue; 
 
}

<input type="checkbox" checked> 
 
<div> 
 
    <p>Test</p> 
 
</div>

來源

2016-11-04 09:52:26 Purushothaman

，如果你可以改變你的HTML的結構：

<input class="chk-hide" type="checkbox" id="chk1"/> 
<div class="chk-circle"> 
<label for="chk1"></label> 
</div>

你可以做這樣的：

.chk-hide[type=checkbox]:checked +.chk-circle {background: green;}

Example

來源

2016-11-04 09:55:05

CSS - 更改父DIV上輸入檢查

回答

相關問題