More Input Types

[ThaUnknown]

supporting more input types would be nice, for example for number: the arrow buttons could even be styled to be always on:

::-webkit-inner-spin-button, ::-moz-inner-spin-button {
    opacity: 1;
    margin-left: .4rem;
    margin-right: -.5rem;
}

and for darkmode, since background color cant be used

.dark-mode ::-webkit-inner-spin-button, .dark-mode ::-moz-inner-spin-button{
    opacity: 1;
    margin-left: ,4rem;
    margin-right: -.5rem;
    filter: invert(.84);
}

[ThaUnknown]

for input type color:

::-webkit-color-swatch-wrapper{
    border: none;
    border-radius: 50%;
    padding: 0;
    background: black; /* custom backgrounds work on this one! */
}
::-webkit-color-swatch{
    border: none;
}
input[type="color"]{
    border: none;
}

for input type: date/datetime-local/month/week [tho this1 is kinda useless to modify]

::-webkit-calendar-picker-indicator {
    background-image: -internal-light-dark(-webkit-image-set(url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNSIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSJXaW5kb3dUZXh0IiBkPSJNMjAgM2gtMVYxaC0ydjJIN1YxSDV2Mkg0Yy0xLjEgMC0yIC45LTIgMnYxNmMwIDEuMS45IDIgMiAyaDE2YzEuMSAwIDItLjkgMi0yVjVjMC0xLjEtLjktMi0yLTJ6bTAgMThINFY4aDE2djEzeiIvPjxwYXRoIGZpbGw9Im5vbmUiIGQ9Ik0wIDBoMjR2MjRIMHoiLz48L3N2Zz4=) 1x), -webkit-image-set(url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNSIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSIjZmZmZmZmIiBkPSJNMjAgM2gtMVYxaC0ydjJIN1YxSDV2Mkg0Yy0xLjEgMC0yIC45LTIgMnYxNmMwIDEuMS45IDIgMiAyaDE2YzEuMSAwIDItLjkgMi0yVjVjMC0xLjEtLjktMi0yLTJ6bTAgMThINFY4aDE2djEzeiIvPjxwYXRoIGZpbGw9Im5vbmUiIGQ9Ik0wIDBoMjR2MjRIMHoiLz48L3N2Zz4=) 1x));
}

for input type range which could potentially be styled after the progress bars

::-webkit-slider-thumb, ::-moz-range-thumb, ::-ms-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 23px;
    height: 24px;
    border: 0;
    background: url('contrasticon.png');
    cursor: pointer;
}
::-webkit-slider-runnable-track, ::-moz-range-track, ::-ms-track {
    width: 100%;
    height: 8.4px;
    cursor: pointer;
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
    background: #3071a9;
    border-radius: 1.3px;
    border: 0.2px solid #010101;
}
/* there also are ::-ms-fill-lower and ::-ms-fill-upper but this is just a quick example */

[halfmoonui]

I will try out the code samples. More input types are planned for v1.2.0, including range, number, password toggle, and full form validation. Regarding the color and date inputs you posted, seems like there is some browser compatibility issues, as those seem to be supported only on Webkit based browsers. I will do some more research to see if equivalents are available on Firefox and IE. Thank you.

[ThaUnknown]

I will try out the code samples. More input types are planned for v1.2.0, including range, number, password toggle, and full form validation. Regarding the color and date inputs you posted, seems like there is some browser compatibility issues, as those seem to be supported only on Webkit based browsers. I will do some more research to see if equivalents are available on Firefox and IE. Thank you.

also CSS for input:invalid would be nice since it doesnt seem like halfmoon has anything like that

[halfmoonui]

It does though: https://www.gethalfmoon.com/docs/form/#invalid-input-and-feedback and https://www.gethalfmoon.com/docs/input/#invalid-inputs

[ThaUnknown]

It does though: https://www.gethalfmoon.com/docs/form/#invalid-input-and-feedback and https://www.gethalfmoon.com/docs/input/#invalid-inputs

it does if the class is manually added, i meant something like

input:invalid{
    box-shadow: 0 0 0 0.2rem var(--danger-color) !important
}

this is useful for things like

<input type="text" pattern="[A-Za-z]{3}">

or

<input type="number" min="0" max="100" step="5">