2013-03-27 42 views
13

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

感謝您的幫助。

+0

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

+6

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風格...

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

+2

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

+12

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

+4

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

2

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

@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參與自定義引導複選框。

+0

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

相關問題