Css Zero Showcase

Pages

No matching results.

x
1
<input type="text" name="otp_input" id="otp_input" placeholder="OTP from SMS" autocorrect="off" autocapitalize="none" required="required" autocomplete="one-time-code" inputmode="numeric" pattern="[0-9]*" class="input" data-controller="otp-input" />
1
<%= text_field_tag "otp_input", nil, placeholder: "OTP from SMS", autocorrect: "off", autocapitalize: "none", required: true, autocomplete: "one-time-code", inputmode: "numeric", pattern: "[0-9]*", class: "input", data: { controller: "otp-input" } %>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
.input--revealable > button > .icon {
  background-image: url("eye.svg");
  background-size: cover;
  block-size: var(--icon-size, var(--size-5));
  filter: var(--color-filter-text);
  inline-size: var(--icon-size, var(--size-5));
}
.input--revealed > button > .icon {
  background-image: url("eye-off.svg");
}
.input--copied > button > img {
  animation: var(--animate-fade-out), var(--animate-slide-out-up);
  animation-duration: var(--time-500);
}
.input--clearable {
  input::-webkit-search-cancel-button {
    display: none;
  }
  &:has(:placeholder-shown) > button {
    display: none;
  }
}
Java Script is not required or multiple files are needed, check the notes.