Add support for other input types

[hacknug]

I’d say adding support for at least input[type=“color”] and input[type=“range”] would make the plugin twice as useful as it is now.

input[type=“file”] would also be cool but I’m not sure how much can you style the button and not loose the ability to display the selected file name without using any JS.

Then there’s all those inputs for date, time, week, month… Not even sure what could be done for those (I’ve never styled them without using any JS library). Just mentioning them in case someone else sees this and has some experience doing it or something.

[GeoffSelby]

I wouldn’t mind looking into it this evening. @adamwathan interested in reviewing a PR for this in the near future?

[khuongduybui]

FWIW I have this in my CSS:

.form-input[type=file] {
  padding-top: calc(0.5rem - 3px);
  padding-bottom: calc(0.5rem - 3px);
}

[viperfx]

👍 for range input type.

[viperfx]

Has good browser support https://caniuse.com/#feat=input-range

[viperfx]

@khuongduybui @GeoffSelby I was wondering if you made any local progress in your project towards adding support for range type that you could share?

[GeoffSelby]

@viperfx I haven't had the time to dig too deep yet. I have some time later today to try and figure it out. I know a range input is the only of the 3 listed by OP that doesn't require JS to work with custom styles. This article may be helpful until then.

[hacknug]

Leaving this from an old project where I had to customize input[type="range"]. I'm sorry I don't have a cleaner version (without vendor prefixes), but maybe it will help:

/* Input Range */
input[type=range] {
  -webkit-appearance: none;
  width: 100%;
  height: 40px;
  padding: 8px 0;
  position: relative;
}

input[type=range]::after {
  content: '';
  position: absolute;
  right: 0;
  top: calc(100% - 36px);
  bottom: calc(100% - 36px);
  display: inline-block;
  width: calc(100% / 1.6);
  background: #84c1f5;
  z-index: 0;
}

input[type=range] *,
input[type=range]:focus,
input[type=range]:focus-within {
  outline: none;
}

input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 16px;
  cursor: pointer;
  box-shadow: 0 0 0 #0342ad, 0 0 0 #034cc6;
  background: #0342ad;
  border-radius: 0;
  border: 0 solid #0342ad;
}

input[type=range]::-webkit-slider-thumb {
  transform: translateZ(0);
  box-shadow: 0 0 0 #0342ad, 0 0 0 #034cc6;
  border: 4px solid #0342ad;
  height: 32px;
  width: 32px;
  border-radius: 50px;
  background: #fff;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -8px;
  position: relative;
  z-index: 1;
}

input[type=range]:focus::-webkit-slider-runnable-track {
  background: #0342ad;
}

input[type=range]::-moz-range-track {
  width: 100%;
  height: 16px;
  cursor: pointer;
  box-shadow: 0 0 0 #0342ad, 0 0 0 #034cc6;
  background: #0342ad;
  border-radius: 0;
  border: 0 solid #0342ad;
}

input[type=range]::-moz-range-thumb {
  transform: translateZ(0);
  box-shadow: 0 0 0 #0342ad, 0 0 0 #034cc6;
  border: 4px solid #0342ad;
  height: 32px;
  width: 32px;
  border-radius: 50px;
  background: #fff;
  cursor: pointer;
}

input[type=range]::-ms-track {
  width: 100%;
  height: 16px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}

input[type=range]::-ms-fill-lower {
  background: #0342ad;
  border: 0 solid #0342ad;
  border-radius: 0;
  box-shadow: 0 0 0 #0342ad, 0 0 0 #034cc6;
}

input[type=range]::-ms-fill-upper {
  background: #0342ad;
  border: 0 solid #0342ad;
  border-radius: 0;
  box-shadow: 0 0 0 #0342ad, 0 0 0 #034cc6;
}

input[type=range]::-ms-thumb {
  transform: translateZ(0);
  box-shadow: 0 0 0 #0342ad, 0 0 0 #034cc6;
  border: 4px solid #0342ad;
  height: 32px;
  width: 32px;
  border-radius: 50px;
  background: #fff;
  cursor: pointer;
}

input[type=range]:focus::-ms-fill-lower {
  background: #0342ad;
}

input[type=range]:focus::-ms-fill-upper {
  background: #0342ad;
}

[bomzj]

There is an issue with styling <input type="range"> aka slider due to it contains shadow dom e.g. ::webkit-slider-thumb. There is an example of slider based on tailwindcss that is similar to default blue button from the examples.

HTML:

<input type="range" class="appearance-none w-full h-1 bg-gray-400 rounded outline-none slider-thumb">

SCSS:

.slider-thumb::-webkit-slider-thumb {
    @apply appearance-none w-6 h-6 rounded-full bg-blue-500 cursor-pointer;
}
  
.slider-thumb::-webkit-slider-thumb:hover {
    @apply bg-blue-700;
}

[gnuget]

We could also include here <input type="date"> which is also missing.