2016-05-27 11 views
2

私は、次のHTMLコードしている:ブートストラップチェックボックスの色を変更するにはどうしたらいいですか?

<div class="container"> 
    <form name="queryForm" class="form-inline text-center"> 
    <p class="checkbox-inline"> 
     <input type="checkbox" name="optionsRadios" id="checkOther" value="other" ng-model="formData.other" ng-true-value="'other'" ng-init="formData.other='other'">Other</p> 
    </form> 
</div> 

とその結果は次のとおりです。

enter image description here

たとえばD7B1D7のために、与えられたものにこの色を変更する最も簡単な方法は何ですか?

+1

メイト、これはここに回答していますhttp://stackoverflow.com/questions/28768623/how-do-you-change-the-style-of-a-bootstrap-checkboxここにhttp://stackoverflow.com/質問/ 26821895/change-color-of-checkbox-label-checked-checked-check-if-check-itがうまく動作することを願っています。 – user3620318

+0

あなたのHTMLコードがブートストラップCSSにリンクされているため、表示された結果が再現されません。いくつかのプラグインを使用していますか、またはいくつかのHTMLがありますか?(ブートストラップクラスが見つからないのはなぜですか?一方の方法はhttp://codepen.io/anon/pen/MeWemdです) –

+0

私の回答は役に立ちましたか? – Yass

答えて

2

私はあなたの例については、このCodePenから.squaredThreeクラスを適応してきました。実際の例を見たい場合は、私の答えの一番下にフィドルのリンクがあります。

ここで更新CSSです:

/* .squaredThree */ 
.squaredThree { 
    position: relative; 
    float:left; 
} 

.squaredThree label { 
    width: 20px; 
    height: 20px; 
    cursor: pointer; 
    position: absolute; 
    top: 0; 
    left: 0; 
    background: #D7B1D7; 
    border-radius: 4px; 
    box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.4); 
} 

.squaredThree label:after { 
    content: ''; 
    width: 9px; 
    height: 5px; 
    position: absolute; 
    top: 4px; 
    left: 4px; 
    border: 3px solid #fcfff4; 
    border-top: none; 
    border-right: none; 
    background: transparent; 
    opacity: 0; 
    -webkit-transform: rotate(-45deg); 
    transform: rotate(-45deg); 
} 

.squaredThree label:hover::after { 
    opacity: 0.3; 
} 

.squaredThree input[type=checkbox] { 
    visibility: hidden; 
} 

.squaredThree input[type=checkbox]:checked + label:after { 
    opacity: 1; 
} 
/* end .squaredThree */ 

は、元labelが擬似チェックボックスとして使用されているように私は、別のlabelを含めるようにHTMLを更新しました。追加label.squaredThreediv外に存在していることを

<div class="container"> 
    <form name="queryForm" class="form-inline"> 
    <div class="squaredThree"> 
     <input type="checkbox" name="optionsRadios" id="checkOther" value="other" ng-model="formData.other" ng-true-value="'other'" ng-init="formData.other='other'"> 
     <label for="checkOther"></label> 
    </div> 
    <label class="label-text">Other</label> 
    </form> 
</div> 

注:これは、あなたの更新されたHTMLです。いくつかの追加のスタイリング・ルールがcheckboxの少し右にテキストを移動するために必要とされるようlabel.label-textのクラスがあります。最後に

.label-text { 
    position: relative; 
    left: 10px; 
} 

checkboxでのチェックのサイズはかなり右そうではありませんそれを修正するために追加のルールが必要である。

+1

ありがとう、私はあなたのフィドルを見て、それは素晴らしい作品、私はちょうどもう一つ質問があります - 私は3つのチェックボックスを隣に持っているようにHTMLコードを更新する方法はありますか?これはhttp://imgur.com/6onY6GAですが、HTMLコードを3回コピーするだけで十分だと思いましたが、結果はhttps://jsfiddle.net/pvyp4mL3/3/ここで間違っています? – user3766930

+1

各チェックボックスを '.container'のクラスで囲むと、問題が解決されます:https://jsfiddle.net/yassarikhan786/pvyp4mL3/ – Yass

+0

ありがとうございました@Yass !!そうしたチェックボックスとそのチェックボックスを置く方法はありますか?互いに隣り合っているラベルの代わりにラベルを付けてください:) – user3766930

-2

input[type=checkbox]は、background-colorプロパティを持っていません。

  1. div内のチェックボックスを使用して、必要に応じてdivのスタイルを設定することができます。

    <div class="row"> 
        <input type="checkbox" /> 
    </div> 
    
  2. あなたはこのような擬似要素を使用することができます。

    input[type=checkbox] { 
        cursor: pointer; 
        } 
    
    input[type=checkbox]:after { 
        content: " "; 
        background-color: #D7B1D7; 
        display: inline-block; 
        visibility: visible; 
    } 
    
    input[type=checkbox]:checked:after { 
        content: "\2714"; 
    } 
    
+0

ありがとう、私は2番目の方法を試しました、これは私が得たものです:http:///imgur/uS3Jあなたが見たいと思う方法を正確に見ていない...最初の例のいくつかの例を私に見せてもらえますか? – user3766930

+0

どのように見たいのですか画像/スナップショット/リンクを送信できますか? – Mona

+0

FFで動作しません....: –

関連する問題