Search code examples
clojurescript

How to remove input spinner arrows on number inputs using Garden?

The following CSS removes the input spinner arrows that user agents automatically include when a text field's type is "number."

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  -moz-appearance: none;
  margin: 0;
}

What is the equivalent code in Garden (noprompt/garden)?

Solution

  • The equivalent code as expressed in Garden (noprompt/garden) is as follows:

    (garden.selectors/defselector input)
(garden.selectors/defpseudoelement -webkit-inner-spin-button)
(garden.selectors/defpseudoelement -webkit-outer-spin-button)

(garden.core/css
  [(input (garden.selectors/attr :type := :number))
    [(garden.selectors/& -webkit-inner-spin-button)
     (garden.selectors/& -webkit-outer-spin-button)
      {:-webkit-appearance :none
       :-moz-appearance :textfield
       :margin 0}]]