web-dev-qa-db-ja.com

チェックボックスの境界線を削除するにはどうすればよいですか？

チェックボックスの周囲の境界線を削除して、非表示にすることはできますか？背景がカラーのDIVに配置しました。

htmlcsscheckbox
13
Erik

残念ながら、ブラウザのネイティブチェックボックスの境界線を削除することはできません（すべてのブラウザで機能するとは限りません）。これを実装するには、独自のチェックボックスのような状態ウィジェットを作成する必要があります。チェックアウト 素敵なフォーム 通常のフォームコントロールをカスタムスタイルでスタイルしたい場合

9
naikus

FireFoxの場合：border：noneを試してください。 IE try：style = "background：transparent; border：0"

もう1つの解決策は、画像の適切なオンクリックを表示するためのチェック付きとチェックなしの独自の画像を作成することです。

8
Greg McNulty

私はこれが遅い答えであることを知っていますが、私が一緒に働いているCSSの専門家は、IE10のチェックボックス（そしておそらくラジオボタン）の周りの境界線を取り除くためにこの方法を私に与えました：

  • 境界線の色をページの背景と同じ色に設定します。
  • 「なし」のボックスシャドウを適用します。

それでおしまい。チャームのように働いた！

6
dauber

これはGoogleで「チェックボックスの境界線を削除」を検索したときの最初の結果なので、チェックボックスのデフォルトのスタイルはIE（たわごとなし...）を除くすべてのブラウザで削除できることを述べておきます。 appearanceプロパティを使用：

-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
1
Petar

CSSでは、これはWebキットの外観をnoneに設定することで可能です。このようなもの

-webkit-appearance: none;
0
Oluwatobi Omotayo