teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

4

追記

2019/02/14 06:59

投稿

7Kreuz
7Kreuz

スコア112

answer CHANGED
@@ -17,4 +17,7 @@
17
17
  }
18
18
  ```
19
19
 
20
- のような感じで、背景画像をbefore疑似要素の中に移動させる必要がありそうです。
20
+ のような感じで、背景画像をbefore疑似要素の中に移動させる必要がありそうです。
21
+
22
+ (追記)
23
+ 割と楽な方法を思いついたのですが、ほぼ質問内のコードのままで、`#filter input[type="range"]::-webkit-slider-thumb`と`#filter input[type="range"]::-moz-range-thumb`の`width`を大きく(30pxとか)にしてみるのはどうでしょうか?

3

heightを追加

2019/02/14 06:59

投稿

7Kreuz
7Kreuz

スコア112

answer CHANGED
@@ -11,6 +11,7 @@
11
11
  input[type="range"]::before {
12
12
  content: "";
13
13
  position: absolute;
14
+ height: 13px;
14
15
  width: 196px;
15
16
  background: url('img/jiku.svg');
16
17
  }

2

背景画像について追記

2019/02/12 05:46

投稿

7Kreuz
7Kreuz

スコア112

answer CHANGED
@@ -1,7 +1,19 @@
1
1
  chromeに関しては、
2
2
  ```css
3
3
  input[type="range"]::-webkit-slider-runnable-track {
4
- margin: 10px 0;
4
+ margin: 0 10px;
5
5
  }
6
6
  ```
7
- で隙間は空くようです
7
+ で隙間は空くようです
8
+
9
+ ……と思いましたが、これだけでは画像も端まで表示されませんね。
10
+ ```css
11
+ input[type="range"]::before {
12
+ content: "";
13
+ position: absolute;
14
+ width: 196px;
15
+ background: url('img/jiku.svg');
16
+ }
17
+ ```
18
+
19
+ のような感じで、背景画像をbefore疑似要素の中に移動させる必要がありそうです。

1

typo修正

2019/02/12 05:43

投稿

7Kreuz
7Kreuz

スコア112

answer CHANGED
@@ -1,6 +1,6 @@
1
1
  chromeに関しては、
2
2
  ```css
3
- input[type="range" i]::-webkit-slider-runnable-track {
3
+ input[type="range"]::-webkit-slider-runnable-track {
4
4
  margin: 10px 0;
5
5
  }
6
6
  ```