ページ内検索バーをChrome風にする.css

Chrome風findbar(Firefox57から)

.browserContainer {
  direction: rtl !important;
}
.browserStack > browser * {
  direction: ltr !important;
}
statuspanel {
  left: 0 !important;
  direction: ltr !important;
}
findbar {
  -moz-box-ordinal-group: 0 !important;
  direction: ltr !important;
  position: fixed !important;
  margin: -1px 20px 0 0 !important;
  box-shadow: none !important;
  border: 1px solid var(--toolbox-border-bottom-color) !important;
  border-top: 0 !important;
  background-color: var(--toolbar-bgcolor) !important;
  background-image: none !important;
  display: -webkit-box !important;
}
.findbar-textbox {
  font-size: medium !important;
}
.findbar-highlight[checked="true"],
.findbar-case-sensitive[checked="true"] {
  box-shadow: var(--toolbarbutton-active-boxshadow) !important;
  background: var(--toolbarbutton-active-background) !important;
}
.findbar-highlight:not([checked="true"]):hover,
.findbar-case-sensitive:not([checked="true"]):hover {
  box-shadow: var(--toolbarbutton-hover-boxshadow) !important;
  background: var(--toolbarbutton-hover-background) !important;
}
.findbar-highlight,
.findbar-case-sensitive {
  padding: var(--toolbarbutton-inner-padding) !important;
}
.findbar-highlight:after {
  content: "\00a0\00a0\00a0\00a0";
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsTAAALEwEAmpwYAAAABGdBTUEAALGOfPtRkwAAACBjSFJNAAB6JQAAgIMAAPn/AACA6QAAdTAAAOpgAAA6mAAAF2+SX8VGAAABlElEQVR42mL8//8/Ay0BQAAxMdAYAAQQzS0ACCCaWwAQQDS3ACCAWEjVsGzLvv/HLlxjsDLQYojycWIkpB4ggJhINZyfl5thcnU2Aw83J8OijbsJJkGAAGIi1XAvOzOG33/+MDia6TMwMzExzF69Da8lAAHERI7hP3/9Zvj24yeDlaE2mD9l6UaclgAEEBMphv/5+xdu+LfvQPzjB4OpjjrD4aNHceoHCCAWclwOMxxE7z1xnsHc3BynGQABxIivqNC3dPh/4dh+rIZ///GLYc/xcwxsbKwMRfHBOFMTQADhDaJLJw4yxBU1gA1DdzkxhoMAQADhDKL44kaw15ZMaALzm4oz4YbvO3mBKMNBACCAcFrw8d0bOBtmSV5SFDjMiTUcBAACiAEUB+h4w96j/0HYyt0f5As41rOw/9+7YM1/bHpwYYAAwumD4xeuM9i6+YLZKtqGDAt76xnJKYsAAogFl+GHd20Gs4/u2MBISWEHEECMtK7RAAKI5sU1QADR3AKAAKK5BQABRHMLAAKI5hYABBgAGVz2EZX7WKAAAAAASUVORK5CYII=) center no-repeat !important;
}
.findbar-case-sensitive:after {
  content: "Aa" !important;
}
.findbar-highlight .toolbarbutton-text,
.findbar-case-sensitive > .toolbarbutton-text {
  display: none !important;
}
.found-matches {
  -moz-box-ordinal-group: 0 !important;
  margin: 0 8px 0 0 !important;
}
.findbar-find-status {
  display: none !important;
}
.findbar-container,
.findbar-closebutton {
  vertical-align: middle !important;
}

Chrome風findbar(Firefox56まで)

.browserContainer {
  direction: rtl !important;
}
statuspanel {
  left: 0 !important;
}
statuspanel[mirror="true"] {
  margin-left: -14px !important;
}
findbar {
  -moz-box-ordinal-group: 0 !important;
  direction: ltr !important;
  position: fixed !important;
  margin: -1px 20px 0 0 !important;
  box-shadow: none !important;
  background-image: none !important;
  border: 1px solid threedshadow !important;
  border-top: 0 !important;
}
/*
.findbar-textbox {
  font-size: medium !important;
}
*/
.findbar-highlight[checked="true"],
.findbar-case-sensitive[checked="true"] {
  border: 1px solid !important;
  border-radius: 2px !important;
  border-color: var(--toolbarbutton-active-bordercolor) !important;
  box-shadow: var(--toolbarbutton-active-boxshadow) !important;
  background: var(--toolbarbutton-active-background) !important;
}
.findbar-highlight:not([checked="true"]):hover,
.findbar-case-sensitive:not([checked="true"]):hover {
  border: 1px solid !important;
  border-radius: 2px !important;
  border-color: var(--toolbarbutton-hover-bordercolor) !important;
  box-shadow: var(--toolbarbutton-hover-boxshadow) !important;
  background: var(--toolbarbutton-hover-background) !important;
}
.findbar-highlight:not(:hover):not([checked="true"]) {
  padding: 0 1px !important;
}
.findbar-highlight .toolbarbutton-text{
  border: none !important;
  box-shadow: none !important;
  font-size: 0 !important;
  padding: 10px 11px !important;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsTAAALEwEAmpwYAAAABGdBTUEAALGOfPtRkwAAACBjSFJNAAB6JQAAgIMAAPn/AACA6QAAdTAAAOpgAAA6mAAAF2+SX8VGAAABlElEQVR42mL8//8/Ay0BQAAxMdAYAAQQzS0ACCCaWwAQQDS3ACCAWEjVsGzLvv/HLlxjsDLQYojycWIkpB4ggJhINZyfl5thcnU2Aw83J8OijbsJJkGAAGIi1XAvOzOG33/+MDia6TMwMzExzF69Da8lAAHERI7hP3/9Zvj24yeDlaE2mD9l6UaclgAEEBMphv/5+xdu+LfvQPzjB4OpjjrD4aNHceoHCCAWclwOMxxE7z1xnsHc3BynGQABxIivqNC3dPh/4dh+rIZ///GLYc/xcwxsbKwMRfHBOFMTQADhDaJLJw4yxBU1gA1DdzkxhoMAQADhDKL44kaw15ZMaALzm4oz4YbvO3mBKMNBACCAcFrw8d0bOBtmSV5SFDjMiTUcBAACiAEUB+h4w96j/0HYyt0f5As41rOw/9+7YM1/bHpwYYAAwumD4xeuM9i6+YLZKtqGDAt76xnJKYsAAogFl+GHd20Gs4/u2MBISWEHEECMtK7RAAKI5sU1QADR3AKAAKK5BQABRHMLAAKI5hYABBgAGVz2EZX7WKAAAAAASUVORK5CYII=) center no-repeat !important;
}
.findbar-case-sensitive {
  padding: 0 3px !important;
}
.findbar-case-sensitive[checked="true"],
.findbar-case-sensitive:not([checked="true"]):hover {
  padding: 1px 2px !important;
}
.findbar-case-sensitive > .toolbarbutton-text {
  display: none !important;
}
.findbar-case-sensitive:after {
  content: "Aa" !important;
  margin: 0 2px 0 !important;
}
.found-matches {
  -moz-box-ordinal-group: 0 !important;
  margin: 0 8px 0 0 !important;
}
.findbar-find-status {
  display: none !important;
}
.findbar-container,
.findbar-closebutton {
  vertical-align: middle !important;
}

更新履歴

2017-11-20
×ボタンが改行しないように
2017-11-18
Firefox57
2015-04-05
2015-04-02
2013-11-08
公開

プロフィール

豆腐

Author:豆腐

最新記事

最新コメント

カテゴリ

月別アーカイブ

FC2カウンター