5

テスト済み: Chrome 23、Firefox 15、Opera 11 (IE10 または Safari 6 はありません)

この HTML では:

<progress value=3 min=1 max=10></progress>

そしてこのCSS：

progress { border: 0 }

...要素のデフォルトのブラウザーレンダリングが消えます。代わりに、基本的なバーに置き換えられます。Firebug と Chrome の Web インスペクターは、要素に最初は border-width がなかったことを示しています。

奇妙なことに、次のよう0に置き換えられた場合none:

progress { border: none }

...Chrome は影響を受けませんが、FF と Opera は同じです。

ちなみに、この基本的なバーはどのようにスタイリングできますか? この種のもの (および、スタイリングなどの他のもの) のドキュメントはどこにありますinput[type=file]か?

スクリーンショット:
最初のプログレス バーは、常にネイティブのスタイル解除バリアントです。

Chrome 23、Windows 8:
クローム 23、ウィンドウズ 8

Internet Explorer 10、Windows 8:
IE 10、ウィンドウズ 8

Chrome 23、Mac OS X 10.6.8:
Chrome 23、OS X 10.6.8

Firefox 15、Mac OS X 10.6.8:
Firefox 15、OS X 10.6.8

Opera 12、Mac OS X 10.6.8:
オペラ 12、OS X 10.6.8

4

2 に答える 2

7

そのスタイルを に適用すると<button>、ネイティブ ボタンのように見えなくなるのとまったく同じ理由で。

<input>、<button>、などの多くの UI コンポーネントは<select>、<progress>ネイティブ コントロールとしてレンダリングされます。ただし、 などのプレゼンテーション スタイルが適用されている場合は、background-colorネイティブborderにレンダリングできないため、指定されたスタイルを使用してブラウザーによって手動でレンダリングされます。そのため、通常とは大きく異なって見える場合があります。

于 2012-12-13T18:57:00.363 に答える
0

おそらく、入力ボタン/送信スタイルも殺す方法と同じ理由です。それらは特別な方法でレンダリングされるため (これは正しい言葉ではありません)、デフォルトのスタイルを変更すると壊れてしまいます。

jQuery UIに固執することをお勧めします。これの唯一の欠点は、余分なキロバイトです。また、同じ機能と外観を維持しながら、より広い範囲のユーザーにサービスを提供できます。

jQuery UI プログレスバーの例のセクションを参照してください。

于 2012-12-13T19:00:20.597 に答える