私はあなたの例については、この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
が.squaredThree
div
外に存在していることを
<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
でのチェックのサイズはかなり右そうではありませんそれを修正するために追加のルールが必要である。
メイト、これはここに回答しています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
あなたのHTMLコードがブートストラップCSSにリンクされているため、表示された結果が再現されません。いくつかのプラグインを使用していますか、またはいくつかのHTMLがありますか?(ブートストラップクラスが見つからないのはなぜですか?一方の方法はhttp://codepen.io/anon/pen/MeWemdです) –
私の回答は役に立ちましたか? – Yass