0

スタイリッシュなブラウザー拡張機能を使用して、Web サイト用のカスタム ダーク テーマを作成しています。最近の更新で、サイトの所有者は多くの点で丸みを帯びた角を考え出しました。これは私の意見では、特に入力フィールドで非常に醜いです。しかし、border-radius: 0px !important;Stylish を使って応募しようとすると、入力欄がおかしくなってしまいます。通常の div のようなものでは問題なく動作しますが、通常<input type=text>の 、 a 、<textarea>または<select>.

これは、カスタム CSS を使用しない場合のテキスト領域の外観です。

ここに画像の説明を入力

これは、私のカスタム CSS でどのように見えるかです:

ここに画像の説明を入力

border-radius: 0px !important;これは、CSSに追加すると次のようになります。

ここに画像の説明を入力

がborder-radius: 0px適用されると、他のすべてのborderプロパティとbackgroundは無視されます。サイトのネイティブ CSS プロパティでさえ使用されません。ブラウザーは、テキストエリアに CSS ルールがまったく定義されていないように、標準の外観を使用するだけです。colorそれでも動作します。

すべてを変えるつもりだっborder-radiusたようです。にのみ追加すると、入力フィールドはホバー時にのみ狂います。使用する必要さえありません:サイトのネイティブ CSS が使用するものと同じものを使用しても問題が発生します。:hover0px6px

これは私のCSSルール全体です:

textarea, input[type="text"], .textbox {
    border-color: #282828 !important;
    border-width: 3px !important;
    border-style: solid !important;
    border-radius: 0px !important;
    background: #0F0F0F !important;
    color: grey !important;
}

本当に奇妙なのはborder-radius: 0px、Firefox 開発者ツールを使用して追加すると問題が発生しないため、スタイリッシュに問題があるように思われることです。

この狂気の原因は何ですか？どうすれば修正できますか？回避策はありますか? 私が持っていた唯一のアイデアは、プロパティを追加するカスタムJSを使用することです...

4

1 に答える 1

0

なんてこった、削除border-style: solid;するとすべてが修正されます。理由はわかりませんが、今は幸せです。

于 2015-01-03T00:22:24.317 に答える