0

Всем привет! У меня есть регистрация на сайте, и выглядит она следующим образом:

alt text

Дело в том, что во время ввода пароля, да как и других полей, можно ошибиться и вписать символ пробела " " и не заметить его.

Вопрос: можно ли как-то подчеркнуть каждый символ, который записан в теге label? (На скрине показано, там есть два пробела.)

P.S. 1: Сплошное подчёркивание - не вариант.
P.S. 2: Не дать ввести пробел - не вариант.
P.S. 3: Каждый символ заключить в отдельный тег label и поставить ему подчёркивание - на крайний случай.

5
  • Самый лучший вариант - написать CSS стиль для label. Либо воспользоваться Вашим, третьим вариантом. Почитайте немного инфы вот тут: artgorbunov.ru/bb/soviet/20120510 13 янв 2015 в 11:03
  • МаринаВоин, я не нашёл свойства, благодаря которому подчёркивание не сплошное, а для каждого символа. 13 янв 2015 в 11:06
  • artgorbunov.ru/bb/soviet/20120510 Но это небольшой мануал, и там все будет зависеть от шрифта, ширины символа. Так что более точную инфу дать не смогу, так как не верстальщик. 13 янв 2015 в 11:07
  • Кстати, вопрос касаемо Вашей темы: hashcode.ru/questions/120720/… 13 янв 2015 в 11:10
  • МаринаВоин, к сожалению, не нашёл на этом сайте решения моей проблемы. 13 янв 2015 в 11:10

2 ответа 2

1

Каждый символ оберните в <span> - это и будет самое верное решение:

label span {
    border-bottom: 1px aqua solid;
}

<label>
<span>s</span><span>y</span><span>m</span><span> </span><span>b</span><span>o</span><span>l</span>
</label>

Но я вижу, у вас на сайте есть javascript, обернуть все символы, например, так:

$('#button').on('click', function() {
    var result = $('input').val()
    ,   view = '';

    for(var i=0; i < result.length; i++) {
        view += "<span>"+result[i].replace(" ", "&nbsp;")+"</span>";
    }

    $('#view').html(view);
});

Пример: http://jsfiddle.net/rmww8Lws/1/

0

Как вариант - нарисовать свой фонт. Вернее, отредактировать какой-нибудь

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.