Php 是否可以将字体图标设置为占位符中的按钮?

Php 是否可以将字体图标设置为占位符中的按钮?,php,html,css,font-awesome,Php,Html,Css,Font Awesome,我已经搜索了很多关于在文本框的占位符中将普通字体图标设置为按钮的内容,但是我找不到解决方案。 我已经设计了一个登录表单,在占位符中已经有一个字体图标作为普通文本: <input class="form-control" type="password" placeholder='Password &#xf070;'/> 因此我可以将此图标用作按钮,以便稍后添加Jquery代码以显示密码吗 谢谢。你不是这样做的。用div包装表单控件,使其位置:相对,并在控件内部放置输

我已经搜索了很多关于在文本框的占位符中将普通字体图标设置为按钮的内容,但是我找不到解决方案。
我已经设计了一个登录表单,在占位符中已经有一个字体图标作为普通文本:

<input class="form-control" type="password" placeholder='Password  &#xf070;'/>

因此我可以将此图标用作按钮,以便稍后添加Jquery代码以显示密码吗




谢谢。

你不是这样做的。用div包装表单控件,使其
位置:相对
,并在控件内部放置
输入
按钮
,位置:绝对;右:0

使用
if($('input').val().length>0){$('button').addClass('hidden')}隐藏按钮


.input wrap{位置:相对}
.input wrap>按钮{位置:绝对;右侧:0;}
$('.input wrap input')。on('keyup',function(){
如果($(this.val().length>0)$(this.next().addClass('hidden');
else$(this.next().removeClass('hidden');
});
;

您可以使用带有
位置:绝对的

$(文档).ready(函数(){
$('.hide password')。单击(函数(){
$(this.toggleClass('show');
});
});
。隐藏密码{
位置:绝对位置;
右:5px;
顶部:6px;
z指数:10;
颜色:#666;
}
.hide-password.show.fa:之前{
内容:“\f06e”;
}

使用者
密码
注册

请与工作示例共享您的html和css代码。。请参阅:@UpendraJoshi这是我的代码中已经包含的内容这没有将图标作为按钮,无论如何,谢谢you@MinalChauhan更新。这正是我很久以来一直在寻找的。真的非常感谢你,.fa:before和z-index做什么?
z-index
用于比其他元素更高的可见顺序和
.fa:before
用于更改iconGlad以帮助您:)
javascript:void(0)
实际上是一种不好的做法。因为每次单击时它都会计算javascript。如果你想让它可以点击,你应该使用一个按钮。@pbibergal如果你们投票支持我的问题,我会感谢你们给我的下一个徽章点数。祝你有一个愉快的一天:)不是我想要的,但无论如何,谢谢你,伙计,投了赞成票:)
<style>
    .input-wrap {position: relative}
    .input-wrap > button {position: absolute; right: 0;}
</style>
<script>
    $('.input-wrap input').on('keyup', function() {
        if($(this).val().length > 0) $(this).next().addClass('hidden');
        else $(this).next().removeClass('hidden');
    });
</script>
<div class="input-wrap">
    <input class="form-control" placeholder="your awesome placeholder">
    <button onclick="togglePassVisible()">&#xf070;</button>
</div>