Как сделать радиокнопку RTL в Tailwind CSS?

Это мой код в html + попутный ветер css:

<div className = "flex justify-center">
  <div className = "flex flex-col justify-center items-start gap-5">
    <div className = "form-check">
      <input
        className = "form-check-input appearance-none rounded-full h-7 w-7 border-4 border-[#5F6368] bg-[#C4C4C4] hover:shadow-lg hover:shadow-[#5F6368] hover:border-[#3B52B5] checked:bg-[#7EABFF] checked:border-[#3B52B5] focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-5 cursor-pointer"
        type = "radio"
        name = "flexRadioDefault"
        id = "flexRadioDefault1"
      />
      <label
        className = "form-check-label text-3xl text-right font-bold text-gray-800"
        htmlFor = "flexRadioDefault1"
      >
        الخيار 1
      </label>
    </div>
  </div>
</div>

Как я могу сделать выбор радио справа налево?

html css tailwind-css arabic right-to-left

04.05.2022 14:12

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Сделайте только один div в качестве родителя поля ввода и метки. Затем дайте родительскому div эти классы: сгибатьсяflex-row-reverseпредметы-центр

<div className = "form-check flex flex-row-reverse items-center">
  <input
    className = "form-check-input appearance-none rounded-full h-7 w-7 border-4 border-[#5F6368] bg-[#C4C4C4] hover:shadow-lg hover:shadow-[#5F6368] hover:border-[#3B52B5] checked:bg-[#7EABFF] checked:border-[#3B52B5] focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-5 cursor-pointer"
    type = "radio"
    name = "flexRadioDefault"
    id = "flexRadioDefault1"
  />
  <label
    className = "form-check-label text-3xl text-right font-bold text-gray-800"
    htmlFor = "flexRadioDefault1"
  >
    الخيار 1
  </label>
</div>

04.05.2022 20:19

Другие вопросы по теме

Как отобразить HTML-таблицу с помощью CSS Grid

Flex-column: как ограничить высоту растущей части, чтобы она не расширялась?

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

Удалите все границы, кроме нижней, используя css

Почему так быстро рушится навигация по сайту?

Как инвертировать цвет текста в соответствии с тем, что за ним стоит? (не только фон)

Создание двух списков рядом друг с другом

Размытие фона видео

@supports (-webkit-touch-callout: none) не работает в iOS 15 Safari

Как показать div в моем диалоговом окне sweetalert2?

Как сделать радиокнопку RTL в Tailwind CSS?

Ответы 1

Другие вопросы по теме

Похожие вопросы