如何在CSS中制作单选按钮RTL？

发布于 2025-01-26 14:03:21 字数 996 浏览 3 评论 0原文

这是我在HTML + Tailwind 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>

如何从右到左做出无线电选择？

原文

This is my code in html + tailwind 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>

How can I make the radio choice from right to left?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

我乃一代侩神 2025-02-02 14:03:21

仅使一个Div作为输入字段和标签的父级。然后给父母div以下类： flex flex-row-reverse-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>

Make just one div as a parent of the input field and the label. Then give the parent div these classes: flex flex-row-reverse items-center

<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>

回复收藏 0 原文

~没有更多了~