如何在twitter引導中設置輸入複選框的樣式？

我必須做一個簡單的輸入複選框，但在bootstrap中找不到某種可選類，也在github上搜索了一些庫，找不到任何簡單的基礎知識。如何在twitter引導中設置輸入複選框的樣式？

感謝您的幫助。

來源

2013-03-27 Cristiano Matos

這是不是很清楚你要求什麼。請詳細說明。 – isherwood 2013-03-27 20:14:38

Hes說，Boostrap中的默認複選框樣式是一個醜陋的灰色框。他可以添加任何課程以使其看起來更好。 – 2014-08-07 15:46:43

-20

只需添加一個ID（如果它只是一個複選框）或類的輸入內容，並定義CSS它：

CSS和HTML

「的自訂」是你給的ID自定義輸入標籤：

<input id="customId" /> 

input#customId{ 
    background: #888 !important; 
    border: none !important; 
    color: #000 !important; 
}

僅僅指剛覆蓋要whatver風格...

重要：只需添加到樣式的結束很重要的強制覆蓋

來源

2013-03-27 20:23:55 DextrousDave

我不認爲這回答了有關複選框的原始問題。此代碼適用於INPUT（即文本），但複選框不容易通過CSS這樣的樣式化。 – rocketmonkeys 2014-07-08 18:09:01

+12

這是如何被接受的答案？這對Bootstrap複選框完全不起作用。 – 2014-10-27 03:19:31

不僅如此，在每個樣式聲明的末尾添加！important是一個可怕的想法，應該儘可能地避免使用這種想法，並支持Cascading（畢竟，它是層疊樣式表）。 – 2015-11-22 14:57:46

你可以玩這個得到的東西可以做一個感覺：

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css'); 
 
@import url(//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css'); 
 

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

 
.custom-check { 
 
\t \t display: inline-block; 
 
\t \t width: 25px; height: 25px; 
 
\t \t background: white; 
 
\t \t border: 1px solid #CCCCCC; 
 
\t \t font-family: 'Glyphicons Halflings'; 
 
\t \t font-size: 22px; 
 
\t \t line-height: 1; 
 
\t } 
 

 
.custom-check::before { 
 
    content: "\e013"; 
 
    color: #424242; 
 
    display: none; 
 
} 
 

 
input[type=checkbox]:checked+.custom-check::before { 
 
    display: block; 
 
    color: white; 
 
    background-color: #554236; 
 
}

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet"> 
 
<div> 
 
    <label > 
 
    <input type="checkbox"> 
 
    <span class="custom-check"></span> 
 
    My Checkbox 
 
    </label> 
 
</div>

如果這還不夠，這answer到類似的問題也給出了一個很好的概述css參與自定義引導複選框。

來源

2016-01-25 03:19:22 BernardV

好戲！但是，在代碼片段中，「我的複選框」文本根據檢查的狀態上下移動（這很可能與基線有關），將隱藏的溢出添加到.custom-check可解決該問題。同時將行高設置爲25px（或者與自定義高度相同）而不是1會產生更好的結果... – 2018-02-17 03:58:11

如何在twitter引導中設置輸入複選框的樣式？

回答

相關問題