diff --git a/20-custom-range-input/images/Chrome.png b/20-custom-range-input/images/Chrome.png new file mode 100644 index 0000000..c94de27 Binary files /dev/null and b/20-custom-range-input/images/Chrome.png differ diff --git a/20-custom-range-input/images/Edge.png b/20-custom-range-input/images/Edge.png new file mode 100644 index 0000000..d752870 Binary files /dev/null and b/20-custom-range-input/images/Edge.png differ diff --git a/20-custom-range-input/images/Firefox.png b/20-custom-range-input/images/Firefox.png new file mode 100644 index 0000000..d690d41 Binary files /dev/null and b/20-custom-range-input/images/Firefox.png differ diff --git a/20-custom-range-input/images/Safari.png b/20-custom-range-input/images/Safari.png new file mode 100644 index 0000000..13e600b Binary files /dev/null and b/20-custom-range-input/images/Safari.png differ diff --git a/20-custom-range-input/index.html b/20-custom-range-input/index.html new file mode 100644 index 0000000..49cc11f --- /dev/null +++ b/20-custom-range-input/index.html @@ -0,0 +1,49 @@ + + + + + + + CSS - Custom Range Input That Looks Consistent Across All Browsers + + + + +
+

Custom Range Input That Looks Consistent Across All Browsers!

+
+
+

Browser Inconsistencies

+
+
+
+ Chrome +
Chrome
+
+
+
+
+ Firefox +
Firefox
+
+
+
+
+ Safari +
Safari
+
+
+
+
+ Edge +
Edge
+
+
+
+
+
+

Custom range input

+ +
+ + diff --git a/20-custom-range-input/style.css b/20-custom-range-input/style.css new file mode 100644 index 0000000..e84607e --- /dev/null +++ b/20-custom-range-input/style.css @@ -0,0 +1,60 @@ +@import url("https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&display=swap"); + +*, +::before, +::after { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: "Lora", serif; +} + +body { + display: flex; + flex-direction: column; + align-items: center; +} + +header { + margin: 20px 0; +} + +img { + width: 200; + height: 200px; +} + +.images { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 20px; +} + +h3 { + text-align: center; + margin-bottom: 20px; +} + +figcaption { + text-align: center; +} + +input[type="range"] { + -webkit-appearance: none; + appearance: none; /* By giving it the value of none this tells each respective browser to clear out any default styles. + This removes track: this is the part of the horizontal slider that the circular thumb runs along */ + background: transparent; + cursor: pointer; + width: 15rem; + background: #053a5f; + height: 0.5rem; +} + +input[type="range"]::-webkit-slider-thumb { + appearance: none; +} + +input[type="range"]::-moz-range-thumb { + -moz-appearance: none; + appearance: none; +}