1. Forum
  2. Usenet
  3. COMP.INFO.WWW.AUTHORING.S

  • No cursor on disabled input type=range

    From Andrew Poulos@21:1/5 to All on Mon Mar 9 19:41:45 2020
    I have an input of type range and this CSS (there are other declaration
    for Firefox etc):

    input[type="range"] {
    -webkit-appearance: none;
    width:100%;
    }
    input[type="range"]::-webkit-slider-runnable-track {
    width: 100%;
    height: 2px;
    background: #dddddd;
    border: none;
    }
    input[type="range"]::-webkit-slider-thumb {
    border: 1px solid #000000;
    height: 8px;
    width: 8px;
    border-radius: 4px;
    background: #bd9b8f;
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -3px;
    }
    input[type="range"]:focus {
    outline: none;
    }

    This displays as expected but when the input is disabled the cursor on
    the thumb remains as a pointer. I need the cursor to change to default.
    I tried adding

    input[type="range"]:disabled {
    cursor: default;
    }

    but that made no difference. What CSS changes the cursor on a disabled
    range thumb to default?

    Andrew Poulos

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From =?UTF-8?B?8J+YiSBHb29kIEd1eSDwn5iJ?@21:1/5 to Andrew Poulos on Mon Mar 9 15:14:36 2020
    This is a multi-part message in MIME format.
    On 09/03/2020 08:41, Andrew Poulos wrote:


    What CSS changes the cursor on a disabled range thumb to default?



    Try this:

    <https://developer.mozilla.org/en-US/docs/Web/CSS/cursor>

    G/L



    --
    With over 1.2 billion devices now running Windows 10, customer
    satisfaction is higher than any previous version of windows.

    <html>
    <head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    </head>
    <body bgcolor="#FFFFE0" text="#006600">
    <div class="moz-cite-prefix">On 09/03/2020 08:41, Andrew Poulos
    wrote:<br>
    </div>
    <blockquote
    cite="mid:B6GdnUQ9m7nWnPvDnZ2dnUU7-fPNnZ2d@westnet.com.au"
    type="cite"><br>
    <br>
     What CSS changes the cursor on a disabled range thumb to default?
    <br>
    <br>
    <br>
    </blockquote>
    <br>
    Try this:<br>
    <br>
    <a class="moz-txt-link-rfc2396E" href="https://developer.mozilla.org/en-US/docs/Web/CSS/cursor">&lt;https://developer.mozilla.org/en-US/docs/Web/CSS/cursor&gt;</a><br>
    <br>
    G/L<br>
    <br>
    <br>
    <br>
    <div class="moz-signature">-- <br>
    <div class="moz-signature">
    <div style="width: 340px;height: 290px; background-color: blue;
    color: yellow;font-weight: bolder; font-size:200%; text-align:
    center; margin: 30px 5px 30px 5px;">With over 1.2 billion
    devices now running Windows 10, customer satisfaction is
    higher than any previous version of windows.</div>
    </div>
    </div>
    </body>
    </html>

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From =?UTF-8?B?8J+YiSBHb29kIEd1eSDwn5iJ?@21:1/5 to All on Mon Mar 9 15:31:15 2020
    This is a multi-part message in MIME format.
    On 09/03/2020 15:14, 😉 Good Guy 😉 wrote:
    On 09/03/2020 08:41, Andrew Poulos wrote:


    What CSS changes the cursor on a disabled range thumb to default?



    Try this:

    <https://developer.mozilla.org/en-US/docs/Web/CSS/cursor>


    For tricks you can read this article:

    <https://css-tricks.com/almanac/properties/c/cursor/>




    --
    With over 1.2 billion devices now running Windows 10, customer
    satisfaction is higher than any previous version of windows.

    <html>
    <head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    </head>
    <body bgcolor="#FFFFE0" text="#006600">
    <div class="moz-cite-prefix">On 09/03/2020 15:14, 😉 Good Guy 😉
    wrote:<br>
    </div>
    <blockquote cite="mid:r45mgt$h5c$1@news.mixmin.net" type="cite">
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <div class="moz-cite-prefix">On 09/03/2020 08:41, Andrew Poulos
    wrote:<br>
    </div>
    <blockquote
    cite="mid:B6GdnUQ9m7nWnPvDnZ2dnUU7-fPNnZ2d@westnet.com.au"
    type="cite"><br>
    <br>
     What CSS changes the cursor on a disabled range thumb to
    default? <br>
    <br>
    <br>
    </blockquote>
    <br>
    Try this:<br>
    <br>
    <a moz-do-not-send="true" class="moz-txt-link-rfc2396E"
    href="https://developer.mozilla.org/en-US/docs/Web/CSS/cursor">&lt;https://developer.mozilla.org/en-US/docs/Web/CSS/cursor&gt;</a><br>
    <br>
    </blockquote>
    <br>
    For tricks you can read this article:<br>
    <br>
    <a class="moz-txt-link-rfc2396E" href="https://css-tricks.com/almanac/properties/c/cursor/">&lt;https://css-tricks.com/almanac/properties/c/cursor/&gt;</a><br>
    <br>
    <br>
    <br>
    <br>
    <div class="moz-signature">-- <br>
    <div class="moz-signature">
    <div style="width: 340px;height: 290px; background-color: blue;
    color: yellow;font-weight: bolder; font-size:200%; text-align:
    center; margin: 30px 5px 30px 5px;">With over 1.2 billion
    devices now running Windows 10, customer satisfaction is
    higher than any previous version of windows.</div>
    </div>
    </div>
    </body>
    </html>

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From James Kirk@21:1/5 to Andrew Poulos on Mon Mar 9 17:06:29 2020
    In Message: <B6GdnUQ9m7nWnPvDnZ2dnUU7-fPNnZ2d@westnet.com.au>
    Andrew Poulos <ap_prog@hotmail.com> wrote:

    I have an input of type range and this CSS (there are other
    declaration for Firefox etc):

    [snip]

    input[type="range"]::-webkit-slider-thumb {
    🖠🖠🖠🖠🖠🖠🖠🖠🖠🖠🖠🖠🖠🖠🖠🖠🖠🖠🖠🖠🖠🖠🖠🖠🖠🖠🖠🖠🖠🖠🖠🖠🖠🖠🖠🖠🖠🖠🖠🖠🖠
    [snip]

    cursor: pointer;
    🖠🖠🖠🖠🖠🖠 🖠🖠🖠🖠🖠🖠🖠

    This displays as expected but when the input is disabled the cursor
    on the thumb remains as a pointer. I need the cursor to change to
    default. I tried adding

    [snip]

    but that made no difference. What CSS changes the cursor on a
    disabled range thumb to default?

    input[type="range"]:disabled::-webkit-slider-thumb {
    cursor:default;
    }

    OR

    input[type="range"][disabled]::-webkit-slider-thumb {
    cursor:default;
    }

    OR

    input[type="range"]:not(:disabled)::-webkit-slider-thumb {
    cursor:pointer;
    }

    OR

    input[type="range"]:not([disabled])::-webkit-slider-thumb {
    cursor:pointer;
    }

    Repeat for other browser specific prefixes.

    --
    James Kirk

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From Andrew Poulos@21:1/5 to James Kirk on Tue Mar 10 09:45:26 2020
    On 10/03/2020 8:06 am, James Kirk wrote:
    In Message: <B6GdnUQ9m7nWnPvDnZ2dnUU7-fPNnZ2d@westnet.com.au>
    Andrew Poulos <ap_prog@hotmail.com> wrote:

    I have an input of type range and this CSS (there are other
    declaration for Firefox etc):

    [snip]

    input[type="range"]::-webkit-slider-thumb {
    🖠🖠🖠🖠🖠🖠🖠🖠🖠🖠🖠🖠🖠🖠🖠🖠🖠🖠🖠🖠🖠🖠🖠🖠🖠🖠🖠🖠🖠🖠🖠🖠🖠🖠🖠🖠🖠🖠🖠🖠🖠
    [snip]

    cursor: pointer;
    🖠🖠🖠🖠🖠🖠 🖠🖠🖠🖠🖠🖠🖠

    This displays as expected but when the input is disabled the cursor
    on the thumb remains as a pointer. I need the cursor to change to
    default. I tried adding

    [snip]

    but that made no difference. What CSS changes the cursor on a
    disabled range thumb to default?

    input[type="range"]:disabled::-webkit-slider-thumb {
    cursor:default;
    }

    I tried this one and it worked. Thanks.

    Andrew Poulos

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From Allodoxaphobia@21:1/5 to Andrew Poulos on Tue Mar 10 16:27:46 2020
    On Tue, 10 Mar 2020 09:45:26 +1100, Andrew Poulos wrote:
    On 10/03/2020 8:06 am, James Kirk wrote:
    Andrew Poulos <ap_prog@hotmail.com> wrote:

    I have an input of type range and this CSS (there are other
    declaration for Firefox etc):

    [snip]

    input[type="range"]::-webkit-slider-thumb {
    🖠🖠🖠🖠🖠🖠🖠🖠🖠🖠🖠🖠🖠🖠🖠🖠🖠🖠🖠🖠🖠🖠🖠🖠🖠🖠🖠🖠🖠🖠🖠🖠🖠🖠🖠🖠🖠🖠🖠🖠🖠
    [snip]

    cursor: pointer;
    🖠🖠🖠🖠🖠🖠 🖠🖠🖠🖠🖠🖠🖠

    This displays as expected but when the input is disabled the cursor
    on the thumb remains as a pointer. I need the cursor to change to
    default. I tried adding

    [snip]

    but that made no difference. What CSS changes the cursor on a
    disabled range thumb to default?

    input[type="range"]:disabled::-webkit-slider-thumb {
    cursor:default;
    }

    I tried this one and it worked. Thanks.

    On all browsers?

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From Andrew Poulos@21:1/5 to Allodoxaphobia on Wed Mar 11 07:34:42 2020
    On 11/03/2020 3:27 am, Allodoxaphobia wrote:
    On Tue, 10 Mar 2020 09:45:26 +1100, Andrew Poulos wrote:
    On 10/03/2020 8:06 am, James Kirk wrote:
    Andrew Poulos <ap_prog@hotmail.com> wrote:

    but that made no difference. What CSS changes the cursor on a
    disabled range thumb to default?

    input[type="range"]:disabled::-webkit-slider-thumb {
    cursor:default;
    }

    I tried this one and it worked. Thanks.

    On all browsers?

    A selector with "webkit" in it wouldn't work on all browsers.

    Andrew Poulos

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)