From fbea864519041fee0f964ac7d019d757b04aca55 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 3 Jan 2022 02:32:26 +0900 Subject: 2021/11/12 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../web/css/_doublecolon_-moz-range-track/index.md | 84 ++++++++++------------ 1 file changed, 39 insertions(+), 45 deletions(-) (limited to 'files/ja') diff --git a/files/ja/web/css/_doublecolon_-moz-range-track/index.md b/files/ja/web/css/_doublecolon_-moz-range-track/index.md index 3675cfc890..b02b34a520 100644 --- a/files/ja/web/css/_doublecolon_-moz-range-track/index.md +++ b/files/ja/web/css/_doublecolon_-moz-range-track/index.md @@ -1,74 +1,68 @@ --- title: '::-moz-range-track' -slug: 'Web/CSS/::-moz-range-track' +slug: Web/CSS/::-moz-range-track tags: - CSS - - 'CSS:Mozilla Extensions' - - Non-standard - - Pseudo-element - - Reference - - Selector -translation_of: 'Web/CSS/::-moz-range-track' + - CSS:Mozilla 拡張 + - 標準外 + - 擬似要素 + - リファレンス + - セレクター +translation_of: Web/CSS/::-moz-range-track --- -
{{CSSRef}}{{Non-standard_header}}
+{{CSSRef}}{{Non-standard_header}} -

::-moz-range-track CSS 疑似要素は、 type="range" の {{HTMLElement("input")}} でインジケーターがスライドする track (例, 溝) を表す Mozilla 拡張機能 です。

+**`::-moz-range-track`** は [CSS](/ja/docs/Web/CSS) の[擬似要素](/ja/docs/Web/CSS/Pseudo-elements)で、 [Mozilla 拡張](/ja/docs/Web/CSS/Mozilla_Extensions)であり、 `type="range"` の {{HTMLElement("input")}} でインジケーターがスライドする*トラック* (すなわち、溝) を表します。 -
-

Note: ::-moz-range-track を <input type="range"> 以外で使用すると、何にも一致せず、効果がありません。

-
+> **Note:** `::-moz-range-track` を `` 以外で使用すると、何にも一致せず、効果がありません。 -

構文

+## 構文 {{csssyntax}} -

+## 例 -

HTML

+### HTML -
<input type="range" min="0" max="100" step="5" value="50"/>
-
+```html + +``` -

CSS

+### CSS -
input[type=range]::-moz-range-track {
+```css
+input[type=range]::-moz-range-track {
   background-color: green;
 }
-
+``` -

結果

+### 結果 -

{{EmbedLiveSample("Example", 300, 50)}}

+{{EmbedLiveSample("Examples", 300, 50)}} -

このスタイルを使用するプログレスバーは、次のようになります:

+このスタイルを使用するプログレスバーは、次のようになります。 -

A range with the track green.

+![A range with the track green](screen_shot_2015-12-04_at_10.14.34.png) -

仕様

+## 仕様書 -

標準の一部ではありません。

+標準の一部ではありません。 -

ブラウザー実装状況

+## ブラウザーの互換性 +{{Compat}} +## 関連情報 -

{{Compat("css.selectors.-moz-range-track")}}

+- Gecko で使われる他の range 型の入力の他の部品をスタイル付けする擬似要素: -

関連項目

+ - {{cssxref("::-moz-range-thumb")}} は溝をスライドするインジケーターを表します。 + - {{cssxref("::-moz-range-progress")}} はトラックの下の部分を表します。 - +- 他のブラウザーで使われる同様の擬似要素: + + - {{cssxref("::-webkit-slider-runnable-track")}} WebKit および Blink (Safari, Chrome, Opera) が対応している擬似要素 + - {{cssxref("::-ms-track")}} Internet Explorer および Edge が対応している擬似要素 + +- [CSS-Tricks: Styling Cross-Browser Compatible Range Inputs with CSS](https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/) +- [QuirksMode: Styling and scripting sliders](https://www.quirksmode.org/blog/archives/2015/11/styling_and_scr.html) -- cgit v1.2.3-54-g00ecf