input :before или :after | CSS

Google-Translate to English

Для input нельзя задать :before или :after [w3.org]. Но унывать нет причины, будем изворачиваться, чтобы жизнь пользователя сделать комфортнее.

Внутри input появляется символ галки, если поле заполнено верно



<form>
  <input type="email" placeholder="email" id="before" required><label for="before">&nbsp;</label>
</form>

input, label слева и :focus



<form id="after"><input type="email" placeholder="email" id="email" required><label for="email" data-fon="✉" data-text="email">&nbsp;</label>
  <input type="tel" pattern="\(\d\d\d\) ?\d\d\d-\d\d-\d\d" placeholder="(###) ###-##-##" id="tel" required><label for="tel" data-fon="☎" data-text="телефон">&nbsp;</label>
</form>

Выделить строку при фокусе input


<form id="line">
  <input type="email" placeholder="email" id="raz" required><label for="raz">email</label>
  <input type="tel" pattern="\(\d\d\d\) ?\d\d\d-\d\d-\d\d" placeholder="(###) ###-##-##" id="dva" required><label for="dva">телефон</label>
</form>
в f t
наверх ↑

8 комментариев:

Анонимный
Как здорово. Спасибо.
NMitra
Благодарю за комментарий!
Оксана Золотницына
Наталья, доброго времени суток. Извините, что не по теме..
Была ли у вас такая ситуация, что не срабатывает восстановление из резервной копии? Я случайно удалила страницу "об авторе", решила восстановить из только что сделанной копии, но в итоге ничего не происходит.
И еще вопрос - в чем может быть баг, если я не вижу одну из своих страниц, а именно "Карта сайта" во внутренних настройках, в то же время она прекрасно отображается при просмотре блога. Чудеса какие-то.
NMitra
Здравствуйте. Вы сделали резервную копию статей http://shpargalkablog.ru/2011/01/bezopastnost-blogger.html или копию шаблона? Срочно скопируйте текст из резервной копии Google http://webcache.googleusercontent.com/search?q=cache:EpJ7m1DwrR4J:www.easy-going.ru/p/blog-page.html+&cd=1&hl=ru&ct=clnk&gl=ru Он её удалит из индекса очень быстро.
NMitra
Хотя, быть может вас интересует этот вариант http://hghltd.yandex.net/yandbtm?fmode=inject&url=http%3A%2F%2Fwww.easy-going.ru%2Fp%2Fblog-page.html&tld=ru&lang=ru&la=&text=http%3A%2F%2Fwww.easy-going.ru%2Fp%2Fblog-page.html&l10n=ru&mime=html&sign=c8ec465f5af7557811bfaab77530c45f&keyno=0 ?

Карта сайта у вас это страница поиска http://www.easy-going.ru/search?max-results=200 Тот включён на всех блогах Blogger, только мало кто им пользуется, так как он ранжирует по дате написания поста.
NMitra
Вот тут http://shpargalkablog.ru/2011/06/forma-poiska-po-saitu.html я показываю как можно с его помощью сделать форму поиска. Обратите внимание на URL результата поиска.
Оксана Золотницына
Спасибо большое за оперативность. Да, я почему-то решила, что резервное копирование шаблона, это тоже самое, что сохранить все посты блога. Теперь я знаю, что это разные реальности.
Текст страницы "об авторе" хитро вытащила через комментарии. Там видимо тоже сохранилась резервная копия.
Карта сайта мне моя не нравится, поэтому и заморочилась с ней.
NMitra
Попробуйте так http://shpargalkablog.ru/2011/04/krasivoe-oglavlenie-blogger.html У вас много фото, должно подойти.
.
1 пиксель белый