1. 首頁
  2. 問答
  3. CSS複選框樣式

CSS複選框樣式

2017-07-18 113 views
0

我正在處理樣式CSS複選框。事情看起來不錯，但我有一個問題。如果箱子標籤上有很多文字，則這些箱子最終不一致。CSS複選框樣式

我該如何更改我的代碼，使複選框位於文本的左側，以保持一致？

這裏是一個的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>

來源

2017-07-18 AndrewLeonardi

回答

2

我想出了這個解決方案：

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>

來源

2017-07-18 00:53:53

0

嘗試span.bigcheck-target{float:left;}

，並刪除：span.bigcheck-target:margin-top: 20px!important;

來源

2017-07-18 00:56:43 NoCrc

0

首先，你的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>

來源

2017-07-18 01:04:11

0

把你的內容你的「輸入」和「跨度」

，並從停止你的用戶後，突出顯示您的內容使用：

.bigcheck { user-select: none; }

來源

2017-07-18 01:11:13 Charles

1

使用flexbox重寫了您的代碼。

你可以做到這一點不改變的標記：

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>

或用標記的變化，在其中放置文本複選框圖標後（推薦的方式）：

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>

來源

2017-07-18 05:16:49

相關問題

 相關問題