Ввод метки в формате RTL CSS

Question

У меня есть форма RTL. Но Input и label не являются обычными подряд.

HTML:

<div class="searchfield">

    <label for="name">name :</label>
    <input type="text" class="input" name="name" id="name" />
</div>
<div class="searchfield">
    <label for="name">last name :</label>
    <input type="text" class="input" name="name" id="name" />
</div>
<div class="searchfield">
    <label for="name">tel :</label>
    <input type="text" class="input" name="name" id="name" />
</div>
<div class="searchfield">
    <label for="name">id :</label>
    <input type="text" class="input" name="name" id="name" />
</div>

CSS:

.searchfield{margin:10px 20px 0 0;}
.label {
    text-shadow: 2px 2px 2px #ccc;
    display: block;
    float: right;
    margin-left:4px;
    text-align: right;
    line-height: 22px;
    }

input.input {
    outline:none;
    border:1px solid rgba(0,0,0, 0.2);
    width:135px; height:20px; background-color:#fafafa; font-size:11px;}

ДЕМО онлайн: http://jsfiddle.net/uEKkF/1/

Мне нужна эта картинка:

Спасибо.

Answer 1

Были две вещи неправильно:

1. Ваш селектор для меток был префиксом ., поэтому он искал любой элемент с классом label, а не элемент label.
2. Ширина этого элемента явно не указана. Когда блочные элементы перемещаются без явной ширины, они только расширяют ширину его содержимого, которое в этом случае было переменным.

Исправление вы можете увидеть здесь: http://jsfiddle.net/uEKkF/3/