inputmask.css 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869
  1. mark.im-caret {
  2. animation: 1s blink step-end infinite !important;
  3. }
  4. mark.im-caret-select {
  5. background-color: rgba(0, 0, 0, 0.25);
  6. }
  7. @keyframes blink {
  8. from, to {
  9. border-right-color: black;
  10. }
  11. 50% {
  12. border-right-color: transparent;
  13. }
  14. }
  15. span.im-static {
  16. color: grey;
  17. }
  18. div.im-colormask {
  19. display: inline-block;
  20. border-style: inset;
  21. border-width: 2px;
  22. appearance: textfield;
  23. cursor: text;
  24. }
  25. div.im-colormask > input, div.im-colormask > input:-webkit-autofill {
  26. position: absolute !important;
  27. display: inline-block;
  28. background-color: transparent;
  29. color: transparent;
  30. -webkit-text-fill-color: transparent;
  31. transition: background-color 5000s ease-in-out 0s;
  32. caret-color: transparent;
  33. text-shadow: none;
  34. appearance: caret;
  35. border-style: none;
  36. left: 0; /*calculated*/
  37. }
  38. div.im-colormask > input:focus {
  39. outline: none;
  40. }
  41. div.im-colormask > input::selection {
  42. background: none;
  43. }
  44. div.im-colormask > input::-moz-selection {
  45. background: none;
  46. }
  47. div.im-colormask > input:-webkit-autofill ~ div {
  48. background-color: rgb(250, 255, 189);
  49. }
  50. div.im-colormask > div {
  51. color: black;
  52. display: inline-block;
  53. width: 100px; /*calculated*/
  54. }
  55. [im-insert="false"] {
  56. caret-color: red;
  57. caret-shape: block;
  58. }