CSSチェックボックススタイリング

Question

CSSチェックボックスのスタイリングに取り組んでいます。状況はかなり良く見えていますが、私には1つの問題があります。ボックスのラベルがたくさんのテキストである場合、ボックスは一貫して一直線に並ぶようになります。

チェックボックスがテキストの左側にあるように、以下のコードを変更して、物事が一貫しているようにするにはどうすればよいですか？ここで

はJSFiddleです：https://jsfiddle.net/7295tvp0/

span.bigcheck-target { 
 
    font-family: FontAwesome; 
 
    font-size: 1.2em; 
 
    margin-top: 20px!important; 
 
} 
 

 
input[type='checkbox'].bigcheck { 
 
    position: relative; 
 
    left: -999em; 
 
    font-size: 2em; 
 
} 
 

 
input[type='checkbox'].bigcheck + span.bigcheck-target:after { 
 
    content: "\f096"; 
 
} 
 

 
input[type='checkbox'].bigcheck:checked + span.bigcheck-target:after { 
 
    content: "\f046"; 
 
} 
 

 
span.bigcheck { 
 
    display: block; 
 
    font-size: 20px; 
 
} 
 

 
.bigcheck-target { 
 
    position: relative 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" /> 
 

 
<span class="bigcheck"> 
 
    <label class="bigcheck">Short 
 
    <input name="amenities" value="wifi" type="checkbox" class="bigcheck" name="cheese" value="yes"/> 
 
    <span class="bigcheck-target"></span> 
 
    </label> 
 
</span> 
 

 
<span class="bigcheck"> 
 
    <label class="bigcheck">Much longer name 
 
    <input name="amenities" value="personal_video" type="checkbox" class="bigcheck" name="cheese" value="yes"/> 
 
    <span class="bigcheck-target"></span> 
 
    </label> 
 
</span>

Answer 1

私はこの解決策を考え出した：

span.bigcheck-target { 
 
    font-family: FontAwesome; 
 
    font-size: 1.2em; 
 
    margin-top: 20px!important; 
 
} 
 

 
input[type='checkbox'].bigcheck { 
 
    position: relative; 
 
    left: -999em; 
 
    font-size: 2em; 
 
} 
 

 
input[type='checkbox'].bigcheck + span.bigcheck-target:after { 
 
    content: "\f096"; 
 
} 
 

 
input[type='checkbox'].bigcheck:checked + span.bigcheck-target:after { 
 
    content: "\f046"; 
 
} 
 

 
span.bigcheck { 
 
    display: block; 
 
    font-size: 20px; 
 
} 
 

 
.bigcheck-target { 
 
    position: relative 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" /> 
 

 
<span class="bigcheck"> 
 
<label class="bigcheck"> 
 
    <input name="amenities" value="wifi" type="checkbox" class="bigcheck" name="cheese" value="yes"/> 
 
    <span class="bigcheck-target"></span> 
 
    <span> Short</span> 
 
</label> 
 
</span> 
 

 
<span class="bigcheck"> 
 
    <label class="bigcheck"> 
 
    <input name="amenities" value="personal_video" type="checkbox" class="bigcheck" name="cheese" value="yes"/> 
 
    <span class="bigcheck-target"></span> 
 
    <span>Much longer name</span> 
 
    </label> 
 
</span>

Answer 2

試してみてくださいspan.bigcheck-target{float:left;}

そして削除：span.bigcheck-target:margin-top: 20px!important;

Answer 3

まず、あなたのHTMLは、リワークのビットを必要とします。行を作成するには、要素divを使用します。 input要素にidの値を与えて、label要素を使用して、for属性を使用してinput要素をラップする必要がないようにします。その後

、単にラベルのための統一された幅の設定：あなたの「入力」と「スパン」の後

をあなたのコンテンツを入れてからユーザーを停止する

span.bigcheck-target { 
 
    font-family: FontAwesome; 
 
    font-size: 1.2em; 
 
    margin-top: 20px!important; 
 
} 
 
input[type='checkbox'].bigcheck {  
 
    font-size: 2em; 
 
} 
 

 
input[type='checkbox'].bigcheck + span.bigcheck-target:after { 
 
    content: "\f096"; 
 
    
 
} 
 
input[type='checkbox'].bigcheck:checked + span.bigcheck-target:after { 
 
    content: "\f046"; 
 
    
 
} 
 

 
label { 
 
    font-size: 20px; 
 
    display:inline-block; 
 
    width:200px; 
 
}

<div> 
 
    <label for="amenities1">Short</label> 
 
    <input id="amenities1" name="amenities" value="wifi" type="checkbox" name="cheese" value="yes"> 
 
    <span class="bigcheck-target"></span> 
 
</div> 
 

 
<div> 
 
    <label for="amenities2">Much longer name</label> 
 
    <input id="amenities2" name="amenities" value="personal_video" type="checkbox" name="cheese" value="yes"> 
 
    <span class="bigcheck-target"></span> 
 
</div>

Answer 4

をコンテンツの強調表示：

.bigcheck { user-select: none; } 

Answer 5

フレックスボックスを使ってコードを書き直しました。

あなたはマークアップを変更することなく、これを達成することができます

span.bigcheck-target { 
 
    font-family: FontAwesome; 
 
    font-size: 1.2em; 
 
    /* space between icon and label */ 
 
    margin-right: 5px; 
 
} 
 

 
input[type='checkbox'].bigcheck { 
 
    /* don't show standard checkbox */ 
 
    display: none; 
 
    font-size: 2em; 
 
} 
 

 
input[type='checkbox'].bigcheck + span.bigcheck-target:after { 
 
    content: "\f096"; 
 
} 
 

 
input[type='checkbox'].bigcheck:checked + span.bigcheck-target:after { 
 
    content: "\f046"; 
 
} 
 

 
span.bigcheck { 
 
    font-size: 20px; 
 
} 
 

 
label.bigcheck { 
 
    /* become flex-container, putting checkbox on every line */ 
 
    display: flex; 
 
    /* center vertically every item */ 
 
    align-items: center; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" /> 
 

 
<span class="bigcheck"> 
 
    <label class="bigcheck"> 
 
    <input name="amenities" value="wifi" type="checkbox" class="bigcheck" name="cheese" value="yes"/> 
 
    <span class="bigcheck-target"></span> 
 
    Short 
 
    </label> 
 
</span> 
 

 
<span class="bigcheck"> 
 
    <label class="bigcheck"> 
 
    <input name="amenities" value="personal_video" type="checkbox" class="bigcheck" name="cheese" value="yes"/> 
 
    <span class="bigcheck-target"></span> 
 
    Much longer name 
 
    </label> 
 
</span>

：

それとも、チェックボックスのアイコンの後にテキストを配置するマークアップの変更、（推奨方法）と

span.bigcheck-target { 
 
    font-family: FontAwesome; 
 
    font-size: 1.2em; 
 
    /* space between icon and label */ 
 
    margin-right: 5px; 
 
} 
 

 
input[type='checkbox'].bigcheck { 
 
    /* don't show standard checkbox */ 
 
    display: none; 
 
    font-size: 2em; 
 
} 
 

 
input[type='checkbox'].bigcheck + span.bigcheck-target:after { 
 
    content: "\f096"; 
 
} 
 

 
input[type='checkbox'].bigcheck:checked + span.bigcheck-target:after { 
 
    content: "\f046"; 
 
} 
 

 
span.bigcheck { 
 
    font-size: 20px; 
 
    /* checkbox on every line */ 
 
    display: block; 
 
} 
 

 
label.bigcheck { 
 
    /* become inline flex-container */ 
 
    display: inline-flex; 
 
    /* center vertically every item */ 
 
    align-items: center; 
 
    /* inverse layout in row */ 
 
    flex-direction: row-reverse; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" /> 
 

 
<span class="bigcheck"> 
 
    <label class="bigcheck">Short 
 
    <input name="amenities" value="wifi" type="checkbox" class="bigcheck" name="cheese" value="yes"/> 
 
    <span class="bigcheck-target"></span> 
 
    </label> 
 
</span> 
 

 
<span class="bigcheck"> 
 
    <label class="bigcheck">Much longer name 
 
    <input name="amenities" value="personal_video" type="checkbox" class="bigcheck" name="cheese" value="yes"/> 
 
    <span class="bigcheck-target"></span> 
 
    </label> 
 
</span>