CSS 在从右到左的页面上使用图像的问题

Question

我的网站上有使用图像替换默认浏览器输入的单选框和复选框问题...所以我使用定位将输入移出许多教程使用的方式，然后 space 对于带有一些填充的图像。但是在像阿拉伯语和希伯来语这样的 rtl 方向页面上，当您单击 radio/label 时。

https://jsfiddle.net/nm3fw7mx/2/（用 javascript 交换图像） https://jsfiddle.net/nm3fw7mx/（简单示例 w/o javascript，单击 radio/label 时显示相同的问题）

知道如何解决这个问题吗？我忘记了在所有浏览器中提交表单，如果输入需要可见（因此我不能使用 display:none; 或可见性：none; 在输入的 css 上？）。至少那是我的猜测，因为当时很多教程都建议使用定位来做到这一点。这是重要的 css:

.label_radio input { position: absolute; left: -9999px; }
.page-text-direction-rtl .label_radio { 
padding-right: 25px;  
  background: transparent url(http://www.mywebsite.com/images/gui/radio_off.png)   no-repeat right 2px; 
}

Answer 1

我做了一个 fiddle 并想出了一些新的东西，你是否尝试将复选框的不透明度设置为零并将其放置在图像附近，你会看到在当前情况下你得到了一个水平滚动，我们不希望那样。

.label_radio input { 
    position: absolute; right: 30px;
    opacity:0;
}

还有这个

.page-text-direction-rtl /*for browsers that don't support :dir        selector */
{
  overflow:none;
  direction: rtl; /*sometimes dir attribute by itself in my ap wasn't  working, so being explicit here */
  text-align: right;
}

你可以试试fiddle

注意：复选框正在被选中，只是它们被隐藏了，不要混淆。祝你好运。

CSS 在从右到左的页面上使用图像的问题

CSS issue with using images on a right-to-left page

css

arabic

hebrew