-
Notifications
You must be signed in to change notification settings - Fork 22.4k
/
index.md
59 lines (39 loc) · 1.19 KB
/
index.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
---
title: "::-webkit-inner-spin-button"
slug: Web/CSS/::-webkit-inner-spin-button
page-type: css-pseudo-element
status:
- non-standard
browser-compat: css.selectors.-webkit-inner-spin-button
---
{{CSSRef}}{{Non-standard_header}}
The **`::-webkit-inner-spin-button`** CSS pseudo-element is used to style the inner part of the spinner button of number picker input elements.
## Syntax
```css
::-webkit-inner-spin-button {
/* ... */
}
```
## Examples
These examples work only in browsers based on WebKit and Blink.
### Changing the cursor in the spin controls
In this example, the CSS {{cssxref("cursor")}} is changed to `pointer` whenever the cursor is positioned over the inner part of the input's spin controls.
#### HTML
```html
<input type="number" />
```
#### CSS
```css
input[type="number"]::-webkit-inner-spin-button {
cursor: pointer;
}
```
#### Result
{{EmbedLiveSample("Changing_the_cursor_in_the_spin_controls", 200, 30)}}
## Specifications
Not part of any standard.
## Browser compatibility
{{Compat}}
## See also
- {{cssxref("::-webkit-textfield-decoration-container")}}
- [Styling Form Controls – WebKit](https://trac.webkit.org/wiki/Styling%20Form%20Controls#inputelement)