スライダとして@Html.CheckBoxFor()
で生成されたチェックボックスのスタイリングに問題があります。@ Html.CheckBoxForをスライダとしてスタイリングする
私は隠れた入力フィールドとなる「犯人」を特定しました。問題を説明するためにfiddleを作成しました。それには@Html.CheckBoxFor()
によって生成されたチェックボックスと、非表示の入力がコメントアウトされたコードと@Html.CheckBoxFor()
によって生成されたコードを使用する2つのチェックボックスが含まれています。
スライダーが最初のスライダーでは機能していないことがわかります。私は私が持っている私の見解では、私はチェックボックスが私のモデルのプロパティにバインドされるようにしたいので@Html.CheckBoxFor()
を使用する必要があるのですが、スライダースタイリング作業を行う方法を見つけ出すことはできません...
:
<div class="slider">
@Html.CheckBoxFor(m => m.IsChecked, new { @class = "toggle-pill" })
@Html.LabelFor(m => m.IsChecked, new { @class = "toggle-label" })
</div>
それをスタイリングのための.css:
.slider [type="checkbox"] {
display: none;
}
.slider .toggle-label {
display: block;
width: 40px;
height: 20px;
position: relative;
background: #ed495c;
border-radius: 10px;
transition: background 0.2s ease;
cursor: pointer;
}
.slider .toggle-label::before {
content: '';
display: block;
width: 50%;
height: 100%;
background: #ffffff;
border-radius: 50%;
box-shadow: 0 0 0 1px #d1d1d1;
position: absolute;
left: 0;
top: 0;
transition: transform 0.2s ease-in-out;
}
.slider [type="checkbox"]:checked + .toggle-label {
background: #93ed49;
}
.slider [type="checkbox"]:checked + .toggle-label::before {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
モデルプロパティ、IsChecked
は、typeof演算bool
です。
答えを追加するために、あなたの質問にコードの詳細を少し入れておく必要があります。しかし、私は[@ CheckBoxFor()を使用して動作することができることを示すために[fiddle](https://dotnetfiddle.net/GRCvNQ)をフォークしました。ちょうどCSSのマイナーな修正が必要です –
あなたのフィドルはそれを修正しました。私はそれを受け入れることができます。ありがとう:) – kanpeki