css筆記

常用軟體,程式語言的筆記和疑問
Forum rules
盡量做到:
每一個貼子都精心編輯;
每一個疑問都得到解答。
ejsoon
Site Admin
Posts: 3514
Joined: 2016 Jan 10, 22:15

css 畫三角

Post by ejsoon » 2017 Nov 08, 11:11

css Triangle能搜出很多,以下來自這裡

Code: Select all

.arrow-up {
  width: 0; 
  height: 0; 
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  
  border-bottom: 5px solid black;
}

.arrow-down {
  width: 0; 
  height: 0; 
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  
  border-top: 20px solid #f00;
}

.arrow-right {
  width: 0; 
  height: 0; 
  border-top: 60px solid transparent;
  border-bottom: 60px solid transparent;
  
  border-left: 60px solid green;
}

.arrow-left {
  width: 0; 
  height: 0; 
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent; 
  
  border-right:10px solid blue; 
}
這裡還有css的其他一些圖形。

ejsoon
Site Admin
Posts: 3514
Joined: 2016 Jan 10, 22:15

css 使圖片翻轉180度

Post by ejsoon » 2017 Nov 11, 10:58

-webkit-transform: rotate(180deg);-moz-transform: rotate(180deg);

ejsoon
Site Admin
Posts: 3514
Joined: 2016 Jan 10, 22:15

sticky

Post by ejsoon » 2018 Apr 20, 18:08


ejsoon
Site Admin
Posts: 3514
Joined: 2016 Jan 10, 22:15

w3.css可以在此學習

Post by ejsoon » 2018 Apr 28, 15:01

http://www.tutorialspoint.com/w3css/index.htm

flat-ui:

Code: Select all

.w3-flat-turquoise
{color:#fff;background-color:#1abc9c}
.w3-flat-emerald
{color:#fff;background-color:#2ecc71}
.w3-flat-peter-river
{color:#fff;background-color:#3498db}
.w3-flat-amethyst
{color:#fff;background-color:#9b59b6}
.w3-flat-wet-asphalt
{color:#fff;background-color:#34495e}
.w3-flat-green-sea
{color:#fff;background-color:#16a085}
.w3-flat-nephritis
{color:#fff;background-color:#27ae60}
.w3-flat-belize-hole
{color:#fff;background-color:#2980b9}
.w3-flat-wisteria
{color:#fff;background-color:#8e44ad}
.w3-flat-midnight-blue
{color:#fff;background-color:#2c3e50}
.w3-flat-sun-flower
{color:#fff;background-color:#f1c40f}
.w3-flat-carrot
{color:#fff;background-color:#e67e22}
.w3-flat-alizarin
{color:#fff;background-color:#e74c3c}
.w3-flat-clouds
{color:#000;background-color:#ecf0f1}
.w3-flat-concrete
{color:#fff;background-color:#95a5a6}
.w3-flat-orange
{color:#fff;background-color:#f39c12}
.w3-flat-pumpkin
{color:#fff;background-color:#d35400}
.w3-flat-pomegranate
{color:#fff;background-color:#c0392b}
.w3-flat-silver
{color:#000;background-color:#bdc3c7}
.w3-flat-asbestos
{color:#fff;background-color:#7f8c8d}
metro-ui:

Code: Select all

.w3-metro-light-green
{color:#fff;background-color:#99b433}
.w3-metro-green
{color:#fff;background-color:#00a300}
.w3-metro-dark-green
{color:#fff;background-color:#1e7145}
.w3-metro-magenta
{color:#fff;background-color:#ff0097}
.w3-metro-light-purple
{color:#fff;background-color:#9f00a7}
.w3-metro-purple
{color:#fff;background-color:#7e3878}
.w3-metro-dark-purple
{color:#fff;background-color:#603cba}
.w3-metro-darken
{color:#fff;background-color:#1d1d1d}
.w3-metro-teal
{color:#fff;background-color:#00aba9}
.w3-metro-light-blue
{color:#000;background-color:#eff4ff}
.w3-metro-blue
{color:#fff;background-color:#2d89ef}
.w3-metro-dark-blue
{color:#fff;background-color:#2b5797}
.w3-metro-yellow
{color:#fff;background-color:#ffc40d}
.w3-metro-orange
{color:#fff;background-color:#e3a21a}
.w3-metro-dark-orange
{color:#fff;background-color:#da532c}
.w3-metro-red
{color:#fff;background-color:#ee1111}
.w3-metro-dark-red
{color:#fff;background-color:#b91d47}
win8:

Code: Select all

.w3-win8-lime
{color:#fff;background-color:#a4c400}
.w3-win8-green
{color:#fff;background-color:#60a917}
.w3-win8-emerald
{color:#fff;background-color:#008a00}
.w3-win8-teal
{color:#fff;background-color:#00aba9}
.w3-win8-cyan
{color:#fff;background-color:#1ba1e2}
.w3-win8-blue
{color:#fff;background-color:#3e65ff}
.w3-win8-cobalt
{color:#fff;background-color:#0050ef}
.w3-win8-indigo
{color:#fff;background-color:#6a00ff}
.w3-win8-violet
{color:#fff;background-color:#aa00ff}
.w3-win8-pink
{color:#fff;background-color:#f472d0}
.w3-win8-magenta
{color:#fff;background-color:#d80073}
.w3-win8-crimson
{color:#fff;background-color:#a20025}
.w3-win8-red
{color:#fff;background-color:#e51400}
.w3-win8-orange
{color:#fff;background-color:#fa6800}
.w3-win8-amber
{color:#fff;background-color:#f0a30a}
.w3-win8-yellow
{color:#fff;background-color:#e3c800}
.w3-win8-brown
{color:#fff;background-color:#825a2c}
.w3-win8-olive
{color:#fff;background-color:#6d8764}
.w3-win8-steel
{color:#fff;background-color:#647687}
.w3-win8-mauve
{color:#fff;background-color:#76608a}
.w3-win8-taupe
{color:#fff;background-color:#87794e}
.w3-win8-sienna
{color:#fff;background-color:#a0522d}
theme-orange:

Code: Select all

.w3-theme-l5 {color:#000 !important; background-color:#fff9f0 !important}
.w3-theme-l4 {color:#000 !important; background-color:#ffebcc !important}
.w3-theme-l3 {color:#000 !important; background-color:#ffd699 !important}
.w3-theme-l2 {color:#000 !important; background-color:#ffc266 !important}
.w3-theme-l1 {color:#000 !important; background-color:#ffad33 !important}
.w3-theme-d1 {color:#fff !important; background-color:#e68a00 !important}
.w3-theme-d2 {color:#fff !important; background-color:#cc7a00 !important}
.w3-theme-d3 {color:#fff !important; background-color:#b36b00 !important}
.w3-theme-d4 {color:#fff !important; background-color:#995c00 !important}
.w3-theme-d5 {color:#fff !important; background-color:#804d00 !important}

.w3-theme-light {color:#000 !important; background-color:#fff9f0 !important}
.w3-theme-dark {color:#fff !important; background-color:#804d00 !important}
.w3-theme-action {color:#fff !important; background-color:#804d00 !important}

.w3-theme {color:#000 !important; background-color:#ff9800 !important}
.w3-text-theme {color:#ff9800 !important}
.w3-border-theme {border-color:#ff9800 !important}

.w3-hover-theme:hover {color:#000 !important; background-color:#ff9800 !important}
.w3-hover-text-theme:hover {color:#ff9800 !important}
.w3-hover-border-theme:hover {border-color:#ff9800 !important}
blue-gray:

Code: Select all

.w3-theme-l5 {color:#000 !important; background-color:#f5f7f8 !important}
.w3-theme-l4 {color:#000 !important; background-color:#dfe5e8 !important}
.w3-theme-l3 {color:#000 !important; background-color:#becbd2 !important}
.w3-theme-l2 {color:#000 !important; background-color:#9eb1bb !important}
.w3-theme-l1 {color:#fff !important; background-color:#7d97a5 !important}
.w3-theme-d1 {color:#fff !important; background-color:#57707d !important}
.w3-theme-d2 {color:#fff !important; background-color:#4d636f !important}
.w3-theme-d3 {color:#fff !important; background-color:#435761 !important}
.w3-theme-d4 {color:#fff !important; background-color:#3a4b53 !important}
.w3-theme-d5 {color:#fff !important; background-color:#303e45 !important}

.w3-theme-light {color:#000 !important; background-color:#f5f7f8 !important}
.w3-theme-dark {color:#fff !important; background-color:#303e45 !important}
.w3-theme-action {color:#fff !important; background-color:#303e45 !important}

.w3-theme {color:#fff !important; background-color:#607d8b !important}
.w3-text-theme {color:#607d8b !important}
.w3-border-theme {border-color:#607d8b !important}

.w3-hover-theme:hover {color:#fff !important; background-color:#607d8b !important}
.w3-hover-text-theme:hover {color:#607d8b !important}
.w3-hover-border-theme:hover {border-color:#607d8b !important}

ejsoon
Site Admin
Posts: 3514
Joined: 2016 Jan 10, 22:15

transition all還可以這麼用

Post by ejsoon » 2018 May 02, 17:04

#navList a:hover {
transition: all 0.2s;
font-size: 20px;
color: orange;
}

ejsoon
Site Admin
Posts: 3514
Joined: 2016 Jan 10, 22:15

transform

Post by ejsoon » 2018 May 04, 09:56

https://css-tricks.com/almanac/properties/t/transform/

Code: Select all

Property Values
Value	Description	Play it
none	Defines that there should be no transformation	Play it »
matrix(n,n,n,n,n,n)	Defines a 2D transformation, using a matrix of six values	Play it »
matrix3d
(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	Defines a 3D transformation, using a 4x4 matrix of 16 values	
translate(x,y)	Defines a 2D translation	Play it »
translate3d(x,y,z)	Defines a 3D translation	
translateX(x)	Defines a translation, using only the value for the X-axis	Play it »
translateY(y)	Defines a translation, using only the value for the Y-axis	Play it »
translateZ(z)	Defines a 3D translation, using only the value for the Z-axis	
scale(x,y)	Defines a 2D scale transformation	Play it »
scale3d(x,y,z)	Defines a 3D scale transformation	
scaleX(x)	Defines a scale transformation by giving a value for the X-axis	Play it »
scaleY(y)	Defines a scale transformation by giving a value for the Y-axis	Play it »
scaleZ(z)	Defines a 3D scale transformation by giving a value for the Z-axis	
rotate(angle)	Defines a 2D rotation, the angle is specified in the parameter	Play it »
rotate3d(x,y,z,angle)	Defines a 3D rotation	
rotateX(angle)	Defines a 3D rotation along the X-axis	Play it »
rotateY(angle)	Defines a 3D rotation along the Y-axis	Play it »
rotateZ(angle)	Defines a 3D rotation along the Z-axis	Play it »
skew(x-angle,y-angle)	Defines a 2D skew transformation along the X- and the Y-axis	Play it »
skewX(angle)	Defines a 2D skew transformation along the X-axis	Play it »
skewY(angle)	Defines a 2D skew transformation along the Y-axis	Play it »
perspective(n)	Defines a perspective view for a 3D transformed element	
initial	Sets this property to its default value. Read about initial	
inherit	Inherits this property from its parent element. Read about inherit	

ejsoon
Site Admin
Posts: 3514
Joined: 2016 Jan 10, 22:15

flex

Post by ejsoon » 2018 May 04, 10:45

http://flexbox.help/

html:

Code: Select all

<html>
<head>
    <meta charset="UTF-8">
    <title>display: flex</title>
    <link rel="stylesheet" href="styles.css?20170216">
</head>
<body>
    <div class="page-heading">Test CSS Flexbox Rules</div>
    <div class="child-count-container">
        <div class="control-heading child-count-info">Change child count</div>
        <input id="ChildCount" class="child-count-slider" type="range" min="1" max="8" value="8">
    </div>
    <div class="flex-parent">
        <div class="flex-child" style="background-color: #46DBFF;">1</div>
        <div class="flex-child" style="background-color: #2CD6FF;">2</div>
        <div class="flex-child" style="background-color: #13D1FF;">3</div>
        <div class="flex-child" style="background-color: #00C8F8;">4</div>
        <div class="flex-child" style="background-color: #00C8F8;">5</div>
        <div class="flex-child" style="background-color: #00B3DF;">6</div>
        <div class="flex-child" style="background-color: #009FC5;">7</div>
        <div class="flex-child" style="background-color: #008AAC;">8</div>
    </div>
    <div class="controls-container">
        <div class="flex-attribute-control flex-direction">
            <div class="control-heading">flex-direction</div>
            <div class="control-group">
                <label>
                    <input type="radio" name="flex-direction" value="row" checked>
                    row (default)
                </label>
                <label>
                    <input type="radio" name="flex-direction" value="row-reverse">
                    row-reverse
                </label>
                <label>
                    <input type="radio" name="flex-direction" value="column">
                    column
                </label>
                <label>
                    <input type="radio" name="flex-direction" value="column-reverse">
                    column-reverse
                </label>
            </div>
        </div>
        <div class="flex-attribute-control flex-wrap">
            <div class="control-heading">flex-wrap</div>
            <div class="control-explanation">whether items wrap to the next <span class="if-row">row</span><span class="if-column">column</span> (only applies if combined <span class="if-row">width</span><span class="if-column">height</span> of items is greater than container's)</div>
            <div class="control-group">
                <label>
                    <input type="radio" name="flex-wrap" value="nowrap" checked>
                    nowrap (default)
                </label>
                <label>
                    <input type="radio" name="flex-wrap" value="wrap">
                    wrap
                </label>
                <label>
                    <input type="radio" name="flex-wrap" value="wrap-reverse">
                    wrap-reverse
                </label>
            </div>
        </div>
        <div class="flex-attribute-control justify-content">
            <div class="control-heading">justify-content</div>
            <div class="control-explanation">alignment along the <span class="if-row">x</span><span class="if-column">y</span> axis</div>
            <div class="control-group">
                <label>
                    <input type="radio" name="justify-content" value="flex-start" checked>
                    flex-start (default)
                </label>
                <label>
                    <input type="radio" name="justify-content" value="flex-end">
                    flex-end
                </label>
                <label>
                    <input type="radio" name="justify-content" value="center">
                    center
                </label>
                <label>
                    <input type="radio" name="justify-content" value="space-around">
                    space-around
                </label>
                <label>
                    <input type="radio" name="justify-content" value="space-between">
                    space-between
                </label>
            </div>
        </div>
        <div class="flex-attribute-control align-items">
            <div class="control-heading">align-items</div>
            <div class="control-explanation">alignment along the <span class="if-row">y</span><span class="if-column">x</span> axis</div>
            <div class="control-group">
                <label>
                    <input type="radio" name="align-items" value="stretch" checked>
                    stretch (default)
                </label>
                <label>
                    <input type="radio" name="align-items" value="baseline">
                    baseline
                </label>
                <label>
                    <input type="radio" name="align-items" value="center">
                    center
                </label>
                <label>
                    <input type="radio" name="align-items" value="flex-start">
                    flex-start
                </label>
                <label>
                    <input type="radio" name="align-items" value="flex-end">
                    flex-end
                </label>
            </div>
        </div>
        <div class="flex-attribute-control align-content">
            <div class="control-heading">align-content</div>
            <div class="control-explanation">only applies if there is more than one <span class="if-row">row</span><span class="if-column">column</span> of items</div>
            <div class="control-group">
                <label>
                    <input type="radio" name="align-content" value="stretch" checked>
                    stretch (default)
                </label>
                <label>
                    <input type="radio" name="align-content" value="center">
                    center
                </label>
                <label>
                    <input type="radio" name="align-content" value="flex-start">
                    flex-start
                </label>
                <label>
                    <input type="radio" name="align-content" value="flex-end">
                    flex-end
                </label>
                <label>
                    <input type="radio" name="align-content" value="space-around">
                    space-around
                </label>
                <label>
                    <input type="radio" name="align-content" value="space-between">
                    space-between
                </label>
            </div>
        </div>
    </div>
    <div class="preview-container">
        <div class="control-heading">CSS OUTPUT</div>
        <pre class="preview"></pre>
    </div>
    <div class="contact">
        Feedback? Get in touch: <a href="https://twitter.com/taylersumms">@taylersumms</a>
    </div>
    <script src="main.js?20170216"></script>
    <!-- Piwik -->
    <script type="text/javascript">
      var _paq = _paq || [];
      _paq.push(['trackPageView']);
      _paq.push(['enableLinkTracking']);
      (function() {
        var u="//zealotops.com/lytics/";
        _paq.push(['setTrackerUrl', u+'piwik.php']);
        _paq.push(['setSiteId', 6]);
        var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
        g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);
      })();
    </script>
    <noscript><p><img src="//zealotops.com/lytics/piwik.php?idsite=6" style="border:0;" alt="" /></p></noscript>
    <!-- End Piwik Code -->
</body>
</html>
styles.css:

Code: Select all

@font-face {
    font-family: 'opensansregular';
    src: url('./fonts/opensans/opensans-regular-webfont.eot');
    src: url('./fonts/opensans/opensans-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('./fonts/opensans/opensans-regular-webfont.woff2') format('woff2'),
         url('./fonts/opensans/opensans-regular-webfont.woff') format('woff'),
         url('./fonts/opensans/opensans-regular-webfont.ttf') format('truetype'),
         url('./fonts/opensans/opensans-regular-webfont.svg#opensansregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
* {
    box-sizing: border-box;
}
body {
    font-family: 'opensansregular', Helvetica;
    color: #333333;
    margin: 0;
}
a,
a:visited {
    color: #00C8F8;
}
.row-is-selected .if-column {
    display: none;
}
.column-is-selected .if-row {
    display: none;
}
.page-heading {
    font-size: 32px;
    text-align: center;
    margin-bottom: 20px;
    text-transform: uppercase;
    color: #FFFFFF;
    background-color: #FF4C65;
    padding: 5px 0;
    text-shadow: 1px 1px #999999;
}
.page-description {
    max-width: 436px;
    margin: 0 auto 20px;
}
.controls-container {
    margin-top: 30px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    flex-wrap: wrap;
}
.flex-attribute-control {
    margin-right: 20px;
    margin: 0 20px 20px 0;
    max-width: 158px;
}
.control-heading {
    margin-bottom: 0px;
    font-size: 20px;
    border-bottom: 1px solid #EEEEEE;
    text-transform: uppercase;
    font-size: 17px;
}
.control-explanation {
    font-style: italic;
    border-bottom: 1px solid #EEEEEE;
    padding: 5px;
    color: #888888;
}
.control-group {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
}
.flex-parent {
    height: 400px;
    width: 600px;
    margin: auto;
    border: 2px solid #EEE;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
}
.flex-child {
    padding: 0px 46px;
    font-size: 40px;
    text-align: center;
    line-height: 132px;
    color: #FFFFFF;
}
.contact {
    text-align: center;
    margin: 50px;
}
.hide {
    display: none;
}
.child-count-container {
    text-align: center;
    margin-bottom: 20px;
}
.child-count-info {
    border-bottom: none;
}
.child-count-slider {
    width: 200px;
}
.preview-container {
    width: 380px;
    margin: 30px auto 0 auto;
    border-radius: 4px;
}
.preview {
    font-size: 14px;
    padding: 10px;
    background-color: #F1F1F1;
}
main.js:

Code: Select all

var flexParent = document.querySelector('.flex-parent');
var controlsContainer = document.querySelector('.controls-container');
var propertyInputs = Array.prototype.slice.call(document.querySelectorAll('input[type="radio"]'));

var preview = document.querySelector('.preview');
var styleObj = {display: 'flex'};

var flexChildren = Array.prototype.slice.call(document.querySelectorAll('.flex-child'));
var childCount = document.getElementById('ChildCount');
var childrenText = document.querySelector('.children-text');

var updateFlexParent = function(input) {
    flexParent.style[input.name] = input.value;
}

var updateExplanations = function() {
    var flexDirectionValue = document.querySelector('input[name="flex-direction"]:checked').value;
    
    // some parts of the explanation text depend on the flex-direction selection
    if (flexDirectionValue.match('row')) {
        // when `flex-direction: row`
        controlsContainer.classList.add('row-is-selected');
        controlsContainer.classList.remove('column-is-selected');
    }
    else if (flexDirectionValue.match('column')) {
        // when `flex-direction: column`
        controlsContainer.classList.add('column-is-selected');
        controlsContainer.classList.remove('row-is-selected');
    }
}

function updateCodePreview(input) {
    styleObj[input.name] = input.value;
    
    var previewCss = JSON.stringify(styleObj, null, '\t');
    preview.innerHTML = previewCss
                            .replace(/"/g, '')
                            .replace(/,/g, ';')
                            .replace(/(align-content.*)(\n)/, '$1;\n')
}

var inputListener = function(evt) {
    updateFlexParent(evt.target);
    updateExplanations();
    updateCodePreview(evt.target);
};

// initial setup
propertyInputs.forEach(function(input) {
    // event listener for each input
    input.addEventListener('change', inputListener);
    // inputs might not be on the default when page loads
    if (input.checked) {
        updateFlexParent(input);
        updateCodePreview(input);
    }
});
childCount.value = 8;
// set up change of child counts
childCount.addEventListener('change', function(evt) {
    var count = evt.target.value;
    
    flexChildren.forEach(function(child, i) {
        if (i >= count) {
            child.classList.add('hide');
        }
        else {
            child.classList.remove('hide');
        }
    });
    
    if (count > 1) {
        childrenText.innerHTML = 'children';
    }
    else {
        childrenText.innerHTML = 'child';
    }
    
});
updateExplanations();

ejsoon
Site Admin
Posts: 3514
Joined: 2016 Jan 10, 22:15

ipnut range style

Post by ejsoon » 2018 Jun 07, 18:13

Code: Select all

body {
    padding: 30px;
}
input[type=range] {
    /*removes default webkit styles*/
    -webkit-appearance: none;
    
    /*fix for FF unable to apply focus style bug */
    border: 1px solid white;
    
    /*required for proper track sizing in FF*/
    width: 300px;
}
input[type=range]::-webkit-slider-runnable-track {
    width: 300px;
    height: 5px;
    background: #ddd;
    border: none;
    border-radius: 3px;
}
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: goldenrod;
    margin-top: -4px;
}
input[type=range]:focus {
    outline: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
    background: #ccc;
}

input[type=range]::-moz-range-track {
    width: 300px;
    height: 5px;
    background: #ddd;
    border: none;
    border-radius: 3px;
}
input[type=range]::-moz-range-thumb {
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: goldenrod;
}

/*hide the outline behind the border*/
input[type=range]:-moz-focusring{
    outline: 1px solid white;
    outline-offset: -1px;
}

input[type=range]::-ms-track {
    width: 300px;
    height: 5px;
    
    /*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
    background: transparent;
    
    /*leave room for the larger thumb to overflow with a transparent border */
    border-color: transparent;
    border-width: 6px 0;

    /*remove default tick marks*/
    color: transparent;
}
input[type=range]::-ms-fill-lower {
    background: #777;
    border-radius: 10px;
}
input[type=range]::-ms-fill-upper {
    background: #ddd;
    border-radius: 10px;
}
input[type=range]::-ms-thumb {
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: goldenrod;
}
input[type=range]:focus::-ms-fill-lower {
    background: #888;
}
input[type=range]:focus::-ms-fill-upper {
    background: #ccc;
}
來自這裡

這裡是全部解釋。

這裡是w3c標準,有datalist講解。

Post Reply