web-dev-qa-db-ja.com

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

標準のasp.netチェックボックスの標準の「3D」の外観を1pxに変更したいと思います。たとえば、スタイリングを境界線に適用しようとすると、それはまさにそれを行います-境界線で標準のチェックボックスを描画します-これは有効だと思います。

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

asp.netcsscheckbox
10
JamesSugrue

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

6
dimarzionist

非標準のコントロールを使用するのではなく、控えめなJavaScriptを使用して事後に実行する必要があります。例については、 http://code.google.com/p/jquery-checkbox/ を参照してください。

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

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

14
gregmac

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

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

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

3
purdueduck

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

最終的にPaulSheriffの Simple Bootstrap CheckBox for Web Forms

<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

3
cymorg

Ajaxコントロールツールキットから入手できるToggleButtonExtenderでAsp.netCheckBoxボタンを使用してみませんか。

2
user392892

このコードを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;
    }
2
DIZAD

asp：CheckBoxコントロールは、実際には1つのチェックボックス入力以上のものを出力することに注意してください。

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

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

ここで、CheckBoxStyleはコントロールに適用されるCssClass属性の値であり、cbCheckBoxはコントロールのIDです。

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

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

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

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

1
Ian P

彼らは本当にブラウザに依存しています。

たぶん、ファイル参照ボタンの変更に関する this 質問の答えと同様のことを行うことができます。

0
Matthew Rapati