gpt4 book ai didi

javascript - 使用图标和文本作为输入占位符

转载 作者:行者123 更新时间:2023-11-28 17:38:56 25 4
gpt4 key购买 nike

我正在尝试使用带有文本的图标作为文本输入字段的占位符,我尝试从表情符号 (http://getemoji.com/) 图标复制并粘贴一个图标,但它不起作用。对于这种情况,我有一个想法,通过使用 css 使用图像图标并添加 javascript 代码以将其隐藏在焦点上,但您可能有另一个更简单的解决方案。

最佳答案

这里给你解决css

试试这个代码 DEMO

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}

关于javascript - 使用图标和文本作为输入占位符,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24549391/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com