При разработке форм с помощью Tailwind CSS вам может потребоваться удалить стрелки по умолчанию (также известные как счетчики) из полей ввода чисел. Эти стрелки могут мешать индивидуальному дизайну, и их сложно стилизовать в разных браузерах.

В этом уроке мы рассмотрим, как добиться этого с помощью Tailwind CSS, как с помощью встроенных стилей, так и с помощью глобального подхода CSS.

Проблема

По умолчанию браузеры добавляют стрелки увеличения и уменьшения к элементам . Несмотря на свою функциональность, эти стрелки часто конфликтуют с индивидуальным дизайном, и их сложно стилизовать одинаково в разных браузерах.

Решение

Мы воспользуемся служебными классами CSS Tailwind, чтобы удалить эти стрелки и создать понятные, настраиваемые числовые поля. Мы также рассмотрим, как применить этот стиль в глобальном масштабе для более крупных проектов.

Встроенный подход

Давайте начнем с примера, в котором используются встроенные классы Tailwind:

Ключевые классы для удаления стрелок:

• [appearance:textfield]: удаляет стиль по умолчанию в Firefox.
• [&::-webkit-outer-spin-button]:appearance-none: Удаляет внешнюю кнопку прокрутки в браузерах WebKit.
• [&::-webkit-inner-spin-button]:appearance-none: Удаляет внутреннюю кнопку прокрутки в браузерах WebKit.

Глобальный подход

Для более крупных проектов вы можете применить этот стиль ко всем числовым полям. Вы можете сделать это, добавив стили в глобальный файл CSS:

1. Откройте файл global.css (или его эквивалент, например app.css или style.css) в зависимости от вашей платформы и настроек.

2. Добавьте следующий CSS:
   

/* In your global.css file */
@layer utilities {
  input[type="number"]::-webkit-inner-spin-button,
  input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  input[type="number"] {
    -moz-appearance: textfield;
  }
}

1. Убедитесь, что этот CSS-файл импортирован в ваш основной CSS-файл Tailwind или включен в ваш HTML.

После добавления этих глобальных стилей вы можете упростить свой HTML:

Обратите внимание, что мы удалили классы удаления стрелок из отдельных входных данных, поскольку теперь они обрабатываются глобальным CSS.

Добавление пользовательских стрелок

Хотя удаление стрелок по умолчанию улучшает согласованность дизайна, вы можете добавить собственные кнопки увеличения/уменьшения для лучшего взаимодействия с пользователем. Вот как можно создать собственные стрелки, соответствующие дизайну нашей формы:

  Quantity
  

    
    

      
        
      
      
        
      
    
  

Давайте разберем ключевые компоненты этой реализации:

1. Мы помещаем ввод в элемент div с относительным позиционированием, чтобы обеспечить абсолютное позиционирование наших пользовательских кнопок.

2. Поле ввода сохраняет свой исходный стиль, включая классы для удаления стрелок по умолчанию:
   

   [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none

1. Мы добавляем элемент div с абсолютным позиционированием для размещения наших пользовательских кнопок:

   





Это расположит кнопки справа от ввода и центрирует их по вертикали.


Каждая кнопка стилизована так, чтобы сочетаться с вводом:



   






h-full заставляет кнопку заполнять высоту ввода.

border-l добавляет тонкий разделитель между кнопками.

text-gray-500 и hover:text-sky-500 обеспечивают изменение цвета при наведении, которое соответствует состоянию фокуса нашей формы.



Мы используем значки SVG для стрелок вверх и вниз, размер которых соответствует w-4 h-4.
События onclick используют методы JavaScript StepUp() и StepDown() для изменения входного значения:




   onclick="document.getElementById('quantity').stepUp()"
   onclick="document.getElementById('quantity').stepDown()"





  
  
  Важные соображения


Вам следует учитывать несколько моментов:


Удаление стрелок может повлиять на пользователей, которые на них полагаются. При необходимости рассмотрите альтернативные методы увеличения/уменьшения.
Это решение работает в современных браузерах. Для старых браузеров может потребоваться дополнительный CSS или JavaScript.



  
  
  Заключение


Реализуя это, встроенно или глобально, вы можете эффективно удалить стрелки по умолчанию из числовых входов во всем проекте.

Для тех, кто хочет еще больше улучшить процесс разработки CSS в Tailwind, воспользуйтесь конструктором страниц DevDojo Tails, который поможет вам с легкостью создавать потрясающие проекты.

Удачного программирования!