web-dev-qa-db-ja.com

チェックボックスが表示されないChrome-他のブラウザで動作する

何が起こっているのか分かりません。 「Remember Me」の左側にチェックボックスがあり、自転車と車があるため、下部に2つのテストがあります。 Firefoxでは表示されますが、Chromeでは表示されません。 CSSに問題があると思いますが、見つかりませんか？誰でも助けていただけますか？

http://www.cloudtute.com/auth

cssgoogle-chromefirefoxcheckbox
22
user1149620

CSSの次の行：

-webkit-appearance: none;

input, button, select, textareaのスタイルルールでは、問題が発生します。

28
Mathijs Flietstra

私は、Chromeに表示されないチェックボックスのこの問題に直面している人々に、より広いレベルで答えています。ここでグーグルによって指示されました。 Safariでもこの問題が発生する可能性があります。これは、両方が現在 WebKit を使用しているためです。

チェックボックスとラジオ入力が適切に表示されない独自のWebサイトでこの問題に遭遇しました。しかし、これをCSSに追加して修正しました。

input[type=checkbox]
{
  -webkit-appearance:checkbox;
}

今では正常に動作します。

success

ご覧のとおり、別の開発者が-webkit-appearance: none;ちょうどあなたの場合のように。私たちの場合、それは私がテーマから始めたためでした。

ただし、入力が確実に表示されるようにするには、CSSでこれらのルールを宣言するだけです。このページでは、<style>タグ（これはお勧めしません）ですが、まだテスト中にスクリーンショットを撮りました。より良い方法は、競合するスタイルを削除し、適切なフォルダーにスタイルを追加することです。

追加のリソース：
https://css-tricks.com/almanac/properties/a/appearance/
https://davidwalsh.name/webkit-appearance
WebKitとは何で、CSSとどのように関連していますか
https://developer.Apple.com/library/content/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html

30
JGallardo

スタイルルールを定義しました。

-webkit-appearance: none;

input, button, select, textareaに対して定義されている場合、削除する必要があり、動作します。

コンソールにJSエラーがあります：Uncaught ReferenceError: containerz is not defined、チェックしてください。

5
Irvin Dominin

Firefoxのチェックボックスに幅0pxを指定すると、それを見ることができますが、Chromeで同じコードを開くと、チェックボックスは非表示になります。

1
user1813774

チェックボックスの値をtrueに設定すると、私にとってはうまくいきました

value="true"
0
Jay Star

同じ問題がありました。 Ad-Block拡張機能を無効にすると機能しました！

次に、このサイトにAd-Blockの例外を追加しました。

0
GEORGE TARANTILS