path: root/files/zh-cn/mozilla/add-ons/webextensions/user_interface/browser_styles/index.html

---
title: Browser styles
slug: Mozilla/Add-ons/WebExtensions/user_interface/Browser_styles
tags:
  - Browser style
  - WebExtensions
  - 扩展程序
  - 指南
  - 浏览器扩展程序
  - 浏览器插件
translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Browser_styles
---
<div>{{AddonSidebar}}</div>

<p>扩展程序包含的某些UI组件，例如： <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Popups">popups</a>, <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Sidebars">sidebars</a>, <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/user_interface/Options_pages">options pages</a> ，实际上可以用如下方式统一定义：</p>

<ol>
 <li>创建一个HTML文件用于描述该UI组件的页面结构</li>
 <li>在manifest.json中添加字段 (<code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_action">browser_action</a></code>, <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/page_action">page_action</a></code>, <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/sidebar_action">sidebar_action</a></code>, 或 <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/options_ui">options_ui</a></code>) 以指向其对应的页面</li>
</ol>

<p>这种方式面临的一个挑战是如何使用浏览器自带的样式，以使得组件的UI表现与浏览器的UI风格相符。要解决这个问题，可以在该字段的配置中增加一个可字段 <code>browser_sytle</code> ，如果设置了这个字段并且值为 <code>true</code> ,  那么该UI组件的HTML将会被插入一个或多个样式表，样式表会使你的扩展程序的UI表现与浏览器的风格一致 (并且与其它同样应用了这个字段的扩展程序一致)。</p>

<p>若使用了 <code>browser_style: true</code> , 你需要在不同的浏览器主题中测试你的扩展程序，以确保其UI表现和期望的一致。 </p>

<div class="blockIndicator note">
<p><strong>谷歌浏览器Google Chrome</strong> 和 欧朋浏览器 <strong>Opera</strong> 使用字段名 <code>chrome_style</code> 而非<code>browser_style</code>, 因此如果要适配它们，你需要同时添加这两个字段。</p>
</div>

<p>在火狐浏览器中，这个样式文件可以在 <code>chrome://browser/content/extension.css</code>查看。为Mac OS X系统额外准备的样式文件也可以在  <code>chrome://browser/content/extension-mac.css</code> 查看。</p>

<p>大多数样式是自动应用的，但是某些元素需要添加非标准的类名 <code style="white-space: nowrap;">browser-style</code> 来获得其样式，如下表所示：</p>

<table class="fullwidth-table standard-table">
 <thead>
  <tr>
   <th scope="col">Element</th>
   <th scope="col">Example</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><code><a href="/en-US/docs/Web/HTML/Element/button">&lt;button&gt;</a></code></td>
   <td>
    <pre class="brush: html no-line-numbers">
&lt;button class="browser-style"&gt;Click me&lt;/button&gt;</pre>
   </td>
  </tr>
  <tr>
   <td>
    <p><code><a href="/en-US/docs/Web/HTML/Element/select">&lt;select&gt;</a></code></p>
   </td>
   <td>
    <pre class="brush: html no-line-numbers">
&lt;select class="browser-style" name="select"&gt;
  &lt;option value="value1"&gt;Value 1&lt;/option&gt;
  &lt;option value="value2" selected&gt;Value 2&lt;/option&gt;
  &lt;option value="value3"&gt;Value 3&lt;/option&gt;
&lt;/select&gt;</pre>
   </td>
  </tr>
  <tr>
   <td><code><a href="/en-US/docs/Web/HTML/Element/textarea">&lt;textarea&gt;</a></code></td>
   <td>
    <pre class="brush: html no-line-numbers">
&lt;textarea class="browser-style"&gt;Write here&lt;/textarea&gt;</pre>
   </td>
  </tr>
  <tr>
   <td>Parent of an <code><a href="/en-US/docs/Web/HTML/Element/input">&lt;input&gt;</a></code></td>
   <td>
    <pre class="brush: html no-line-numbers">
&lt;div class="browser-style"&gt;
  &lt;input type="radio" id="op1" name="choices" value="op1"/&gt;
  &lt;label for="op1"&gt;Option 1&lt;/label&gt;

  &lt;input type="radio" id="op2" name="choices" value="op2"/&gt;
  &lt;label for="op2"&gt;Option 2&lt;/label&gt;
&lt;/div&gt;</pre>
   </td>
  </tr>
 </tbody>
</table>

<div class="blockIndicator note">
<p>查看 {{bug(1465256)}} 以了解相关修订</p>
</div>

<h2 id="浏览器兼容性">浏览器兼容性</h2>

<p>{{Compat("webextensions.browser_style")}}</p>

<h2 id="火狐面板组件Firefox_Panel_Components">火狐面板组件Firefox Panel Components</h2>

<div class="blockIndicator nonStandard">
<p><strong>非标准</strong><br>
 此功能不是通用标准，仅支持在firefox中使用</p>
</div>

<p><code>chrome://browser/content/extension.css</code> 样式文件中也包含了火狐面板组件的样式</p>

<p><a href="https://firefoxux.github.io/StyleGuide/#/navigation">legacy Firefox Style Guide</a> 使用示例</p>

<table class="fullwidth-table standard-table">
 <thead>
  <tr>
   <th scope="col">Element</th>
   <th scope="col">Example</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>Header</td>
   <td>
    <pre class="brush: html">
&lt;header class="panel-section panel-section-header"&gt;
  &lt;div class="icon-section-header"&gt;&lt;img src="image.svg"/&gt;&lt;/div&gt;
  &lt;div class="text-section-header"&gt;Header&lt;/div&gt;
&lt;/header&gt;</pre>
   </td>
  </tr>
  <tr>
   <td>Footer</td>
   <td>
    <pre class="brush: html">
&lt;footer class="panel-section panel-section-footer"&gt;
  &lt;button class="panel-section-footer-button"&gt;Cancel&lt;/button&gt;
  &lt;div class="panel-section-footer-separator"&gt;&lt;/div&gt;
  &lt;button class="panel-section-footer-button default"&gt;Confirm&lt;/button&gt;
&lt;/footer&gt;</pre>
   </td>
  </tr>
  <tr>
   <td>Tabs</td>
   <td>
    <pre class="brush: html">
&lt;div class="panel-section panel-section-tabs"&gt;
  &lt;button class="panel-section-tabs-button selected"&gt;Tab&lt;/button&gt;
  &lt;div class="panel-section-tabs-separator"&gt;&lt;/div&gt;
  &lt;button class="panel-section-tabs-button"&gt;Tab&lt;/button&gt;
  &lt;div class="panel-section-tabs-separator"&gt;&lt;/div&gt;
  &lt;button class="panel-section-tabs-button"&gt;Tab&lt;/button&gt;
&lt;/div&gt;</pre>
   </td>
  </tr>
  <tr>
   <td>Form</td>
   <td>
    <pre class="brush: html">
&lt;div class="panel-section panel-section-formElements"&gt;
  &lt;div class="panel-formElements-item"&gt;
    &lt;label for="name01"&gt;Label:&lt;/label&gt;
    &lt;input type="text" value="Name" id="name01" /&gt;
  &lt;/div&gt;
  &lt;div class="panel-formElements-item"&gt;
    &lt;label for="picker01"&gt;Label:&lt;/label&gt;
    &lt;select id="picker01"&gt;
      &lt;option value="value1" selected="true"&gt;Dropdown&lt;/option&gt;
      &lt;option value="value2"&gt;List Item&lt;/option&gt;
      &lt;option value="value3"&gt;List Item&lt;/option&gt;
    &lt;/select&gt;
  &lt;/div&gt;
  &lt;div class="panel-formElements-item"&gt;
    &lt;label for="placeholder01"&gt;Label:&lt;/label&gt;
    &lt;input type="text" placeholder="Placeholder" id="placeholder01" /&gt;
    &lt;button name="expander" class="expander"&gt;&lt;/button&gt;
  &lt;/div&gt;
&lt;/div&gt;</pre>
   </td>
  </tr>
  <tr>
   <td>Menu</td>
   <td>
    <pre class="brush: html">
&lt;div class="panel-section panel-section-list"&gt;
  &lt;div class="panel-list-item"&gt;
    &lt;div class="icon"&gt;&lt;/div&gt;
    &lt;div class="text"&gt;List Item&lt;/div&gt;
    &lt;div class="text-shortcut"&gt;Ctrl-L&lt;/div&gt;
  &lt;/div&gt;

  &lt;div class="panel-list-item"&gt;
    &lt;div class="icon"&gt;&lt;/div&gt;
    &lt;div class="text"&gt;List Item&lt;/div&gt;
    &lt;div class="text-shortcut"&gt;&lt;/div&gt;
  &lt;/div&gt;

  &lt;div class="panel-section-separator"&gt;&lt;/div&gt;

  &lt;div class="panel-list-item disabled"&gt;
    &lt;div class="icon"&gt;&lt;/div&gt;
    &lt;div class="text"&gt;Disabled List Item&lt;/div&gt;
    &lt;div class="text-shortcut"&gt;&lt;/div&gt;
  &lt;/div&gt;

  &lt;div class="panel-section-separator"&gt;&lt;/div&gt;

  &lt;div class="panel-list-item"&gt;
    &lt;div class="icon"&gt;&lt;/div&gt;
    &lt;div class="text"&gt;List Item&lt;/div&gt;
    &lt;div class="text-shortcut"&gt;&lt;/div&gt;
  &lt;/div&gt;

  &lt;div class="panel-list-item"&gt;
    &lt;div class="icon"&gt;&lt;/div&gt;
    &lt;div class="text"&gt;List Item&lt;/div&gt;
    &lt;div class="text-shortcut"&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</pre>
   </td>
  </tr>
 </tbody>
</table>

<h3 id="Example">Example</h3>

<h4 id="HTML">HTML</h4>

<pre class="brush: html">&lt;header class="panel-section panel-section-header"&gt;
  &lt;div class="icon-section-header"&gt;&lt;!-- An image goes here. --&gt;&lt;/div&gt;
  &lt;div class="text-section-header"&gt;Header&lt;/div&gt;
&lt;/header&gt;

&lt;div class="panel-section panel-section-list"&gt;
  &lt;div class="panel-list-item"&gt;
    &lt;div class="icon"&gt;&lt;/div&gt;
    &lt;div class="text"&gt;List Item&lt;/div&gt;
    &lt;div class="text-shortcut"&gt;Ctrl-L&lt;/div&gt;
  &lt;/div&gt;

  &lt;div class="panel-list-item"&gt;
    &lt;div class="icon"&gt;&lt;/div&gt;
    &lt;div class="text"&gt;List Item&lt;/div&gt;
    &lt;div class="text-shortcut"&gt;&lt;/div&gt;
  &lt;/div&gt;

  &lt;div class="panel-section-separator"&gt;&lt;/div&gt;

  &lt;div class="panel-list-item disabled"&gt;
    &lt;div class="icon"&gt;&lt;/div&gt;
    &lt;div class="text"&gt;Disabled List Item&lt;/div&gt;
    &lt;div class="text-shortcut"&gt;&lt;/div&gt;
  &lt;/div&gt;

  &lt;div class="panel-section-separator"&gt;&lt;/div&gt;

  &lt;div class="panel-list-item"&gt;
    &lt;div class="icon"&gt;&lt;/div&gt;
    &lt;div class="text"&gt;List Item&lt;/div&gt;
    &lt;div class="text-shortcut"&gt;&lt;/div&gt;
  &lt;/div&gt;

  &lt;div class="panel-list-item"&gt;
    &lt;div class="icon"&gt;&lt;/div&gt;
    &lt;div class="text"&gt;List Item&lt;/div&gt;
    &lt;div class="text-shortcut"&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;footer class="panel-section panel-section-footer"&gt;
  &lt;button class="panel-section-footer-button"&gt;Cancel&lt;/button&gt;
  &lt;div class="panel-section-footer-separator"&gt;&lt;/div&gt;
  &lt;button class="panel-section-footer-button default"&gt;Confirm&lt;/button&gt;
&lt;/footer&gt;</pre>

<div class="hidden">
<h4 id="CSS">CSS</h4>

<pre class="brush: css">/* Global */
html,
body {
  background: white;
  box-sizing: border-box;
  color: #222426;
  cursor: default;
  display: flex;
  flex-direction: column;
  font: caption;
  margin: 0;
  padding: 0;
  -moz-user-select: none;
}

body * {
  box-sizing: border-box;
  text-align: start;
}

button.panel-section-footer-button,
button.panel-section-tabs-button {
  color: inherit;
  background-color: unset;
  font: inherit;
  text-shadow: inherit;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
}

/* Panel Section */
.panel-section {
  display: flex;
  flex-direction: row;
}

.panel-section-separator {
  background-color: rgba(0, 0, 0, 0.15);
  min-height: 1px;
}

/* Panel Section - Header */
.panel-section-header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
  padding: 16px;
}

.panel-section-header &gt; .icon-section-header {
  background-position: center center;
  background-repeat: no-repeat;
  height: 32px;
  margin-right: 16px;
  position: relative;
  width: 32px;
}

.panel-section-header &gt; .text-section-header {
  align-self: center;
  font-size: 1.385em;
  font-weight: lighter;
}

/* Panel Section - List */
.panel-section-list {
  flex-direction: column;
  padding: 4px 0;
}

.panel-list-item {
  align-items: center;
  display: flex;
  flex-direction: row;
  height: 24px;
  padding: 0 16px;
}

.panel-list-item:not(.disabled):hover {
  background-color: rgba(0, 0, 0, 0.06);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.panel-list-item:not(.disabled):hover:active {
  background-color: rgba(0, 0, 0, 0.1);
}

.panel-list-item.disabled {
  color: #999;
}

.panel-list-item &gt; .icon {
  flex-grow: 0;
  flex-shrink: 0;
}

.panel-list-item &gt; .text {
  flex-grow: 10;
}

.panel-list-item &gt; .text-shortcut {
  color: #808080;
  font-family: "Lucida Grande", caption;
  font-size: .847em;
  justify-content: flex-end;
}

.panel-section-list .panel-section-separator {
  margin: 4px 0;
}

/* Panel Section - Footer */
.panel-section-footer {
  background-color: rgba(0, 0, 0, 0.06);
  border-top: 1px solid rgba(0, 0, 0, 0.15);
  color: #1a1a1a;
  display: flex;
  flex-direction: row;
  height: 41px;
  margin-top: -1px;
  padding: 0;
}

.panel-section-footer-button {
  flex: 1 1 auto;
  height: 100%;
  margin: 0 -1px;
  padding: 12px;
  text-align: center;
}

.panel-section-footer-button &gt; .text-shortcut {
  color: #808080;
  font-family: "Lucida Grande", caption;
  font-size: .847em;
}

.panel-section-footer-button:hover {
  background-color: rgba(0, 0, 0, 0.06);
}

.panel-section-footer-button:hover:active {
  background-color: rgba(0, 0, 0, 0.1);
}

.panel-section-footer-button.default {
  background-color: #0996f8;
  box-shadow: 0 1px 0 #0670cc inset;
  color: #fff;
}

.panel-section-footer-button.default:hover {
  background-color: #0670cc;
  box-shadow: 0 1px 0 #005bab inset;
}

.panel-section-footer-button.default:hover:active {
  background-color: #005bab;
  box-shadow: 0 1px 0 #004480 inset;
}

.panel-section-footer-separator {
  background-color: rgba(0, 0, 0, 0.1);
  width: 1px;
  z-index: 99;
}</pre>

<hr>
<pre class="brush: css">/* Example specific – not part of chrome://browser/content/extension.css */
body {
  background: #fcfcfc;
  background-clip: padding-box;
  border: 1px solid rgba(24,26,27,.2);
  box-shadow: 0 3px 5px rgba(24,26,27,.1),0 0 7px rgba(24,26,27,.1);
  box-sizing: content-box;
  margin: 2em auto .5em;
  width: 384px;
}

html {
  min-height: 100vh;
}

html &gt; body {
  margin: auto;
}

.icon-section-header {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDMyIDMyIj48Y2lyY2xlIGZpbGw9IiMzNjM5NTkiIGN4PSIxNSIgY3k9IjE1IiByPSIxNSIvPjwvc3ZnPg==");
}</pre>
</div>

<h4 id="Result若查看失败，请切回英文版查看">Result(若查看失败，请切回英文版查看)</h4>

<p>{{EmbedLiveSample("Example","640","360")}}</p>