CSSを使用してAsp:CheckBoxのスタイル/外観を変更する

StackOverflow https://stackoverflow.com/questions/112883

  •  02-07-2019
  •  | 
  •  

質問

標準のasp.netチェックボックスの標準の「3D」外観をソリッド1ピクセルに変更したいと考えています。たとえば、スタイルを境界線に適用しようとすると、それはまさにそれを行います - 周囲に境界線が付いた標準のチェックボックスを描画します - これは有効だと思います。

とにかく、実際のテキストボックスのスタイルを変更する方法はありますか?

役に立ちましたか？

解決

CheckBox の見た目を大きく変える最善の方法は、チェックボックス コントロールをまったく使用しないことだと思います。ハイパーリンクまたは画像要素の上にチェック/未チェックの状態を表示するには、独自の画像を使用することをお勧めします。乾杯。

他のヒント

非標準のコントロールを使用するのではなく、目立たない JavaScript を使用して事後的にそれを実行する必要があります。見る http://code.google.com/p/jquery-checkbox/ たとえば。

標準の ASP チェックボックスを使用すると、コードの記述が簡素化されます。独自のユーザー コントロールを作成する必要はなく、既存のコード/ページをすべて更新する必要もありません。

さらに重要なのは、これはすべてのブラウザが認識できる標準の HTML コントロールであるということです。すべてのユーザーがアクセスでき、JavaScript を持っていなくても機能します。たとえば、視覚障害者用のスクリーン リーダーは、これを単なるリンク付きの画像ではなく、チェックボックス コントロールとして理解できるようになります。

最も単純で最良の方法は、カスタム デザインの ASP チェックボックス コントロールを使用することです。

 chkOrder.InputAttributes["class"] = "fancyCssClass";

そのようなものを使うことができます..それが役立つことを願っています

Ajax コントロール ツールキットから利用できる ToggleButtonExtender で Asp.net CheckBox ボタンを使用してみてはいかがでしょうか。

ASP.NET Web フォームとブートストラップを使用する場合、上記のどれもうまく機能しません。

結局Paul Sheriffのものを使いました Web フォーム用のシンプルなブートストラップ チェックボックス

<style>
    .checkbox .btn, .checkbox-inline .btn {
    padding-left: 2em;
    min-width: 8em;
    }
    .checkbox label, .checkbox-inline label {
    text-align: left;
    padding-left: 0.5em;
    }
    .checkbox input[type="checkbox"]{
        float:none;
    }
</style>


<div class="form-group">
    <div class="checkbox">
        <label class="btn btn-default">
            <asp:CheckBox ID="chk1" runat="server" Text="Required" />
        </label>
    </div>
</div>

結果はこんな感じです...
The result looks like this

それが本当に asp.net 関連の質問であるかどうかはわかりません。ぜひ試してみてください。たくさんの有益な情報がここにあります。

http://www.456bereastreet.com/archive/200409/styling_form_controls/

留意していただきたいのは、 asp:チェックボックス コントロールは実際には、単一のチェックボックス入力以上のものを出力します。

たとえば、私のコードの出力は

<span class="CheckBoxStyle">
    <input id="ctl00_cphContent_cbCheckBox" 
           name="ctl00$cphContent$cbCheckBox"
           type="checkbox">
</span>

どこ チェックボックススタイル コントロールに適用される CssClass 属性の値です。 cbチェックボックス コントロールのIDです。

入力のスタイルを設定するには、ターゲットに CSS を記述する必要があります。

span.CheckBox input {
  /* Styles here */
}

このコードを CSS に貼り付けると、チェックボックスのスタイルをカスタマイズできるようになります。ただし、これは最良の解決策ではなく、既存のチェックボックス/ラジオボタンの上にスタイルを表示することになります。

   input[type='checkbox']:after 
{

        width: 9px;
        height: 9px;
        border-radius: 9px;
        top: -2px;
        left: -1px;
        position: relative;
        background-color: #3B8054;
        content: '';
        display: inline-block;
        visibility: visible;
        border: 3px solid #3B8054;
        transition: 0.5s ease;
        cursor: pointer;

}

input[type='checkbox']:checked:after 
    {
        background-color: #9DFF00;
    }

実際にはブラウザに依存しています。

おそらく、次の答えと同様のことを行うことができます これ ファイル参照ボタンの変更についての質問です。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top