Добавление звездочки ‹sup› к заполнителю или хороший способ пометить обязательные поля с помощью заполнителя

Я ищу способ стилизовать звездочку в заполнителе.

Такой простой текст в заполнителе меня не удовлетворяет:

Ваш адрес электронной почты*

Обратите внимание, что текст заполнителя является переменным, поэтому статический фон не сыграет свою роль.


html css placeholder
person Dan    schedule 14.02.2013    source источник

Ответы (4)


arrow_upward
13
arrow_downward

:after работает, но вам нужно ориентироваться на заполнитель, а не на элемент ввода... и тогда вы можете использовать свойства position: absolute; и top, left, чтобы переместить * куда угодно...

Демонстрация (не уверен в другом синтаксисе, но я тестировал на webkit как am используя firefox ‹ 17, поэтому, если что-то не работает в каком-либо браузере, сообщите мне)

HTML

<input type="text" placeholder="E-Mail" />

CSS

::-webkit-input-placeholder:after {
   content: '*';
}

:-moz-placeholder:after { /* Firefox 18- */
   content: '*'; 
}

::-moz-placeholder:after {  /* Firefox 19+ */
   content: '*';
}

:-ms-input-placeholder:after {  
   content: '*';
}
person Mr. Alien    schedule 14.02.2013
comment
У вас есть два объявления -moz и нет версии без префикса. Также: +1. - person David says reinstate Monica; 14.02.2013
comment
@DavidThomas double двоеточие заменило селекторы single-colon для псевдоэлементов в CSS3, чтобы сделать явное различие между псевдоклассами и псевдоэлементами, поэтому объявлены оба;) и я не знаю об общей версии для этого, если вы знаете, не стесняйтесь редактировать мой отвечать :) - person Mr. Alien; 14.02.2013
comment
@EugeneKrevenets спасибо за уведомление, я посмотрю, когда вернусь к работе :) - person Mr. Alien; 06.06.2014
comment
Не работает в последней версии Chrome. - person certainlyakey; 15.03.2021

arrow_upward
2
arrow_downward

Это должно сработать. Вы можете перейти сюда, чтобы найти любую HTML-сущность, которую можно добавить в заполнитель. Убедитесь, что в вашей голове есть метатег, использующий кодировку UTF-8.

<head>
    <meta charset="utf-8">
</head>

<input type="text" id="email" class="form-control input-lg formData" placeholder="Your Email&#42;"/>
person Community    schedule 28.09.2016

arrow_upward
1
arrow_downward

Лучший способ — оставить звездочку в заполнителе в качестве запасного варианта, потому что это работает только в браузерах Webkit. Таким образом, для других браузеров ваши пользователи не знают, какое поле является обязательным.

Тогда вы сталкиваетесь с другой проблемой - двумя звездочками в заполнителе. Это можно очень легко исправить с помощью javascript.

Я написал об этом статью: http://d.pr/1zQu

person Johnny Vietnam    schedule 06.03.2015

arrow_upward
0
arrow_downward

Самый простой способ, который я нашел, - это дать полю ввода фоновое изображение:

<!DOCTYPE html>
<html>
  <head>
    <style>
      input.mandatory {
        padding: 2px;
        height: 30px;
        width: 200px;
        background-image: url("http://www.fileformat.info/info/unicode/char/002a/asterisk.png");
        background-position: 160px -10px;
        background-repeat: no-repeat;
        background-size: 30%;
      }
      </style>
  </head>
  <body>
    <input class='mandatory' type='text' placeholder='Username'>
  </body>
</html>

https://jsfiddle.net/t7jnyqos/18/

person Manuel    schedule 27.08.2018