Размещение метки над входом, как? - PullRequest
Новая
       17

Размещение метки над входом, как?

2 голосов
/ 21 сентября 2011

Я пытаюсь расположить метки на входах, но кажется, что они не перемещаются на них, пока я не изменю их положение на absolute (что мне не нужно).

Вот пример моего кода: 

  <label for="username">Your Email...</label>
  <input name="username" class="field" type="text" id="username" maxlength="40" />

Вот CSS: 

label {
    color:#373737;
    font-weight:bold;
    font-family:Tahoma, Geneva, sans-serif;
    font-size:18px;
    margin-left:8px;
    margin-top:28px;
    }

А вот что я получаю:

The result

Теперь вот вещь, которую я пытаюсь воспроизвести, и по какой-то странной причине она работает здесь, но не на моей стороне. Демонстрацию, которую я пытаюсь скопировать со своими собственными свойствами CSS

Ответы [ 4 ]

2 голосов
/ 21 сентября 2011

Я думаю, что в основном то, что вы хотите сделать, уже существует во многих плагинах jQuery «Водяной знак».

Google «jQuery Watermark» и вы получите множество версий.Это означает, что вам не нужно играть с hmtl / css / jquery самостоятельно

РЕДАКТИРОВАТЬ

Если вы хотите пойти по маршруту, по которому вы идете, топросто разместите метки с помощью jQuery.Посмотрите на эту скрипку для примера: http://jsfiddle.net/EM7Pz/1/ Вы увидите, что вы позиционируете метки абсолютно, а затем с помощью jQuery вы меняете их позиции на позиции входов, в которых они должны быть. Таким образом, вы можетезатем измените их цвет, размер и т. д. ... так, как вы хотите, и это дает вам больше контроля, чем плагин Watermark

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

2 голосов
/ 21 сентября 2011

См. Связанный ответ: Ввод с водяным знаком (css & Jquery) .

В качестве дополнения к этому ответу:

Вы можете установить атрибут placeholder равным тому, что есть в вашем label, а затем скрыть label с помощью CSS. Это дает вам именно то, что вы хотите, с минимальной работой.

2 голосов
/ 21 сентября 2011

Демонстрация, с которой вы связаны, добавляет отрицательный margin-right к тегу <label>, чтобы натянуть его поверх <input>.У вас этого нет в опубликованном вами CSS.

0 голосов
/ 15 марта 2013

Чтобы получить: 

label1    label2    label3
field1    field2    field3

введите HTML: 

<div id="set">
<label for="field1">field1labeltext</label>
<input id="field1"></input>
<label for="field2">field2labeltext</label>
<input id="field2"></input>
<label for="field3">field3labeltext</label>
<input id="field3"></input>
</div>`

И установить в .css: 

#set{
    position:relative;
    top: 30px;
    margin-bottom: 30px;
}
label{
    position:relative;
    display: inline-block;
    top:-30px;
    width: 0px;
}

С уважением,
Тим ван Стинберген,
Tieka.nl

...