在自定義複選框中居中檢查/打勾

我正在構建一個自定義複選框，功能幾乎存在，但樣式還有一段路要走。在自定義複選框中居中檢查/打勾

我有幾個問題，

我需要圓
我只需要檢查是活動的複選框本身不是文本的內點擊中心的檢查。

我害怕我似乎無法使用左側位置左側的填充而不使用填充。

HTML

<label for='product-45-45'> 
    <input type='checkbox' style="float:left;" id='product-45-45' /> 
    <div class="accord-text"> 
    <strong>header:</strong> sub text 
    <strong>more text!</strong> 
    </div> 
</label>

CSS

input[type=checkbox] { 
    display: none; 
} 

input[type=checkbox] + .accord-text:before { 
    width: 30px; 
    height: 30px; 
    border-radius: 200%; 
    background-color: #d6e4ec; 
    border: 1px solid #000; 
    display: block; 
    font-size: 150%; 
    font-weight: 900; 
    content: ""; 
    color: green; 
} 

input[type=checkbox]:checked + .accord-text:before { 
    display: table; 
    content: "\2713"; 
}

來源

2017-01-24 Benjamin Oats

問題1：text-align: center;時複選框IC檢查，並從複選框去除style="float:left;"
問題2：刪除accord-text DIV文本，並把它外面。

.row{ 
 
    display: flex; 
 
    flex-direction: row; 
 
} 
 

 
input[type=checkbox] { 
 
    display: none; 
 
} 
 

 
input[type=checkbox] + .accord-text:before { 
 
    width: 30px; 
 
    height: 30px; 
 
    border-radius: 200%; 
 
    background-color: #d6e4ec; 
 
    border: 1px solid #000; 
 
    display: block; 
 
    font-size: 140%; 
 
    font-weight: 900; 
 
    content: ""; 
 
    color: green; 
 
} 
 

 
input[type=checkbox]:checked + .accord-text:before { 
 
    display: table; 
 
    content: "\2713"; 
 
    text-align: center; 
 
}

<div class="row"> 
 
    <label for='product-45-45'> 
 
    <input type='checkbox' style="float:left;" id='product-45-45' /> 
 
    <div class="accord-text"> 
 

 
    </div> 
 
</label> 
 

 
    <strong>header:</strong> sub text 
 
    <strong>more text!</strong> 
 
</div>

來源

2017-01-24 12:12:06

似乎完美，在一分鐘內接受不好，謝謝。 –

也投票！謝謝！ –

爲了把它全部放在一條線上，我只是把它包在一個跨度中？ –

您需要刪除的造型輸入到左浮動內嵌代碼，你不能同時浮球是居中。然後加保證金：0汽車，使其中心：

input[type=checkbox]:checked { 
    float: none; 
} 

input[type=checkbox] + .accord-text:before { 
    margin: 0 auto; 
    width: 30px; 
    height: 30px; 
    border-radius: 200%; 
    background-color: #d6e4ec; 
    border: 1px solid #000; 
    display: block; 
    font-size: 150%; 
    font-weight: 900; 
    content: ""; 
    color: green; 
}

來源

2017-01-24 12:08:09 Pixelomo

不，我在小提琴上檢查了這一點，並沒有工作，謝謝反正 –

檢查這個片段也當我們檢查我有固定的身高問題，

添加display:block和max-height這個input[type=checkbox]:checked + .accord-text:before

input[type=checkbox] { 
 
    display: none; 
 
} 
 
label { 
 
float:left; 
 
} 
 
input[type=checkbox] + .accord-text:before { 
 
    width: 30px; 
 
    height: 30px; 
 
    border-radius: 200%; 
 
    background-color: #d6e4ec; 
 
    border: 1px solid #000; 
 
    display: block; 
 
    font-size: 150%; 
 
    font-weight: 900; 
 
    content: ""; 
 
    color: green; 
 
    text-align:center; 
 
    max-height:30px; 
 
} 
 

 
input[type=checkbox]:checked + .accord-text:before { 
 
    display: table; 
 
    content: "\2713"; 
 
    max-height:30px; 
 
    display:block; 
 
} 
 
span { 
 
float:left; 
 
padding-left:5px; 
 
}

<label for='product-45-45'> 
 
    <input type='checkbox' style="float:left;" id='product-45-45' /> 
 
    <div class="accord-text"></div> 
 
</label> 
 
<span><strong>header:</strong> sub text 
 
    <strong>more text!</strong> 
 
</span>

來源

2017-01-24 12:26:30

現在檢查，點擊時沒有跳過複選框 –

回答

相關問題