2

多くの Web サイトで動作し、ページに検索テキスト ボックスを追加する chrome 拡張機能を開発しています。ブラウザのデフォルト CSS スタイルのみを使用するように (Web サイトに固有のものではなく)、この入力要素をマークする方法はありますか?

問題は、サイトごとに入力ボックスに適用されるスタイルが異なることです。拡張機能の入力ボックスが Web サイト全体で一貫して見えるようにするには、関連するすべての CSS プロパティの値を明示的に指定する必要があります。私はそれを避けようとしていますが、代わりにこの要素をマークして、ウェブサイトのスタイルを使用せずにブラウザのデフォルトのみを使用できるかどうか疑問に思っていますか?

4

2 に答える 2

2

CSS には、要素をページ上のスタイル シートの影響から分離する方法はなく、ブラウザのデフォルト スタイル シートのみが適用されていることを示す方法もありません。プロパティを目的の値に設定するか、使用されているスタイル シートを変更して、セレクターが要素に一致しないようにすることができます。

iframe検索ボックスを別のファイルに配置し、 (またはobject) ページに挿入して、おそらく絶対に配置して埋め込むことを検討することもできます。フレーム化されたドキュメント内では、フレーム化ドキュメントのスタイル シートは効果がありません。

于 2012-12-27T09:21:34.463 に答える
1

私の質問のフォローアップです。これは、テキスト入力要素の外観と動作をさまざまなWebサイト間で一貫させるために使用しているCSSです。これまでにテストしたすべてのサイトでうまく機能しています。これに関するフィードバック/コメントは素晴らしいでしょう。

input.reset-text-input {

/********
dimensions and float property of the input element
*********/

box-sizing: border-box !important; /*using box-sizing for easier calculations. make sure to specify this because it varies across sites, and changes the effective dimensions of the textbox*/
margin: 0 !important;
padding: 2px !important;
width: 150px !important;
height: 20px !important;
float: none !important;


/********
border, outline and drop shadow
********/

border: 1px solid #999 !important;

/*some border radius*/
-webkit-border-radius: 2px !important;
-moz-border-radius: 2px !important;
border-radius: 2px !important;

/*no drop shadow*/
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;

outline: none !important;


/**********
text properties
***********/
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
font-size: 13px !important;
color: black !important;
vertical-align: baseline !important;
word-spacing: 0px !important;

/*not sure if something like this can help. commented for now*/
/*-webkit-appearance: textfield !important;*/
/*appearance: textfield !important;*/
}

input.reset-text-input:focus {
     /*show an outline around the element that is same as chrome's default. this needs to be set as it is turned off on some sites. */
    outline: 5px auto -webkit-focus-ring-color !important;
}

`

于 2013-01-05T20:54:02.940 に答える