Использовать значок и текст в качестве заполнителя для ввода

#javascript #html #css #placeholder #emoji

#javascript #HTML #css #плейсхолдер #эмодзи

Вопрос:

Я пытаюсь использовать значок с текстом в качестве заполнителя поля ввода текста, я попытался скопировать и вставить значок из Emoji (http://getemoji.com /) значки, но это не работает. У меня есть идея для этого случая использовать значок изображения с использованием css и добавить код javascript, чтобы скрыть его в фокусе, но у вас может быть другое решение попроще.

1. Возможно, стоит отметить, что некоторые смайлики будут отображаться в цвете, а другие — нет. например, в моем случае (с использованием Inter var), ☺️ отображается в черно-белом, но большинство других смайликов отображаются в цвете.

Ответ №1:

вот вам решение css

попробуйте эту ДЕМОНСТРАЦИЮ кода

HTML

 <input type="text" class="name" placeholder="🐮 some text">

CSS

     input {
    border: none;
    outline: none;
    font-size:2em;
    border: 1px solid #767676;
    background-color: #FFFFFF;
    width: 331px;
    height: 44px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
     -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}
:focus::-webkit-input-placeholder {color: transparent}
:focus::-moz-placeholder          {color: transparent}
:focus:-moz-placeholder           {color: transparent}
:focus:-ms-input-placeholder      {color: transparent}

1. не работает, выглядит как square .. есть ли для этого специальное кодирование?

2. попробуйте <p class=»emoji» style=»размер шрифта:3,5em»> 😄 😃 😀 😊 ☺ 😉 😍 😘 😚 😗 😙 😜 😝 😛 😳 😁 😔 😌 😒 😞 😣 😢 😂 😭 😪 😥 😰 😅 😓 😩 😫 😨 😱 😠 😡 😤 😖 😆 😋 😷 😎 😴 😵 😲 😟 😦 😧 😈 👿 😮 😬 😐 😕 😯 😶 😇 😏 😑 👲 👳 👮 👷 💂 👶 👦 👧 👨 👩 👴 👵 👱 👼 👸 </ p>

3. или выполните поиск специальных символов, таких как here such amp;#8364;