我正在綁定我的複選框右側的文本。目前文本出現在多行中。對齊自定義複選框問題css

我試圖改變寬度，並賦予它一個固定的寬度：

.checkbox span.custom { 
    margin-left: 34px; 
    display: inline-block; 
    width: 100px; // MY TRY 
}

，但它正在改變複選框的大小不是文本旁邊。

CSS：

* { 
    box-sizing: border-box; 
} 

label { 
    display: inline-block; 
} 

.checkbox { 
    position: relative; 
    min-height: 24px; 
    font-size: 1.6rem; 
} 

.checkbox input { 
    -webkit-tap-highlight-color: transparent; 
    height: 10px; 
    margin: 6px; 
    opacity: 0; 
    outline: none; 
    position: absolute; 
    left: 1px; 
    top: 1px; 
    width: 10px; 
} 

.checkbox .custom { 
    background-color: #fff; 
    border: 1px solid #ccc; 
    border-radius: 3px; 
    display: inline-block; 
    height: 24px; 
    left: 0; 
    position: absolute; 
    top: 0; 
    width: 24px; 
} 

.checkbox span { 
    display: inline-block; 
    margin-left: 34px; 
    margin-top: 0; 
    position: relative; 
    top: 3px; 
} 

.checkbox input:checked:not(:disabled) + .custom { 
    background-color: #0574ac; 
    border-color: #0574ac; 
} 

.checkbox span { 
    margin-left: 0px; 
} 

.checkbox span.custom { 
    margin-left: 34px; 
    display: inline-block; 
    width: 100px; // MY TRY 
} 

.checkbox span.custom .radio span.custom { 
    margin-left: 34px; 
    margin-right: 34px; 
    display: flex; 
} 

.radio input:checked + .custom:after { 
    background-color: #0574ac; 
    border-radius: 100%; 
    border: 3px solid #fff; 
    content: ""; 
    display: block; 
    height: 16px; 
    position: absolute; 
    width: 16px; 
}

HTML：

<label for="checkbox1" class="checkbox"> 
     <input id="checkbox1" type="checkbox" role="checkbox" /><span class="custom">Checkbox 1</span> 
</label>

JSFiddle Demo

來源

2016-08-30 user4756836

嗯爲什麼一些很多的CSS？你只想讓標籤與複選框對齊？ –

是的，我需要將標籤與複選框對齊。左邊的標籤和右邊的複選框@AdamBuchananSmith – user4756836

@ user4756836，我剛纔注意到這裏的評論，你想在標籤文本和複選框之間切換。我也爲此添加了一個例子，歡迎您在答案中檢查更新。 – Dekel

您應該刪除.checkbox .custom，也是width: 24px您擁有的position: absolute有導致您的問題。

這裏是一個工作版本：

* { 
 
    box-sizing: border-box; 
 
} 
 

 
label { 
 
    display: inline-block; 
 
} 
 

 
.checkbox { 
 
    position: relative; 
 
    min-height: 27px; 
 
    font-size: 1.6rem; 
 
} 
 

 
.checkbox input { 
 
    -webkit-tap-highlight-color: transparent; 
 
    margin: 6px; 
 
    opacity: 0; 
 
    outline: none; 
 
    position: relative; 
 
    left: 1px; 
 
    top: 1px; 
 
    line-height: 26px; 
 
} 
 
.checkbox input#checkbox2, .checkbox input#checkbox3 { 
 
    opacity: 1; 
 
} 
 
.checkbox3 { 
 
    display: flex; 
 
} 
 
.checkbox3 span { 
 
    order: -1; 
 
} 
 
.checkbox .custom { 
 
    background-color: #fff; 
 
    border: 1px solid #ccc; 
 
    border-radius: 3px; 
 
    display: inline-block; 
 
    height: 27px; 
 
    left: 0; 
 
    top: 0; 
 
} 
 

 
.checkbox span { 
 
    display: inline-block; 
 
    margin-left: 34px; 
 
    margin-top: 0; 
 
    position: relative; 
 
    top: 3px; 
 
} 
 

 
.checkbox.checkbox3 span.custom { 
 
    margin-left: 0; 
 
} 
 
.checkbox input:checked:not(:disabled) + .custom { 
 
    background-color: #0574ac; 
 
    border-color: #0574ac; 
 
} 
 

 
.checkbox span { 
 
    margin-left: 0px; 
 
} 
 

 
.checkbox span.custom { 
 
    margin-left: 34px; 
 
    display: inline-block; 
 
} 
 

 
.checkbox span.custom .radio span.custom { 
 
    margin-left: 34px; 
 
    margin-right: 34px; 
 
    display: flex; 
 
} 
 

 
.radio input:checked + .custom:after { 
 
    background-color: #0574ac; 
 
    border-radius: 100%; 
 
    border: 3px solid #fff; 
 
    content: ""; 
 
    display: block; 
 
    height: 16px; 
 
    position: absolute; 
 
    width: 16px; 
 
}

<label for="checkbox1" class="checkbox"> 
 
    <input id="checkbox1" type="checkbox" role="checkbox" /><span class="custom">Checkbox 1</span> 
 
</label> 
 
<br /> 
 
<label for="checkbox2" class="checkbox"> 
 
    <input id="checkbox2" type="checkbox" role="checkbox" /><span class="custom">Checkbox 2</span> 
 
</label> 
 
<br /> 
 
<label for="checkbox3" class="checkbox checkbox3"> 
 
    <input id="checkbox3" type="checkbox" role="checkbox" /><span class="custom">Checkbox 3</span> 
 
</label>

我不知道爲什麼你設置opacity: 0的複選框本身，所以我加入的複選框的例子，而不opacity: 0

更新

我注意到您希望標籤位於左側，複選框位於右側，因此我還爲使用Flexbox模型添加了一個示例。

來源

2016-08-30 21:35:01 Dekel

嘗試是這樣的：

label { 
 
    display: inline-block; 
 
    text-align: right; 
 
}

<div class="block"> 
 
    <label>Simple label</label> 
 
    <input type="checkbox" /> 
 
</div>

來源

2016-08-30 21:22:44 agsolid

這甚至沒有複選框。它也不包含OP示例的自定義藍色效果。 –

你給的代碼隱藏與opacity: 0實際本地複選框，然後使用選擇:checked改變span.custom元素的background-color當複選框被選中。

你的嘗試完全按照你所說的去做。

如果您希望文本出現在選中時變藍的區域之外，則需要完全重新考慮您的複選框設計，因爲如果不大幅改變標記就不可能這樣工作，而且整個邏輯它的工作方式。

來源

2016-08-30 21:22:51

我認爲您正在尋找類似的東西？這是很難說，雖然https://jsfiddle.net/tkuyxko4/1/

如果你想改變一些東西，評論如下。

HTML

<input id="checkbox1" type="checkbox" role="checkbox" /> 
<label for="checkbox1" class="checkbox">Checkbox 1</label>

CSS

label { 
    background-color: #fff; 
    border: 1px solid #ccc; 
    border-radius: 3px; 
} 

input[type="checkbox"]:checked + label { 
    background-color: #0574ac; 
    border-radius: 3px; 
    border: 3px solid #fff; 
}

來源

2016-08-30 21:30:05

對齊自定義複選框問題css

回答

更新

相關問題