文本框文字的显示和隐藏

如何实现单击文本框，里面的文字隐藏，点击外面，文本框文本显示出来，下面我给大家看一下，我们做华为网页的时候文本框的截图


在input标签给它设置圆角效果，和边框为0，但是当点击文本框，它有一个蓝色的轮廓，而且竖线很浅，贴近边框

所以我们给它一个轮廓outline设置为none，竖线缩进可以设置正值或者负值，负值则向左靠近，正值则向右。

.headerright input{
 width:320px;
 height: 30px;
 border-radius: 20px;
 border: 0;
 background: #f5f5f5;
 outline: none;
 text-indent: 14px;
}

我们用js写一下文本框文字的显示和隐藏，通过点击文本框，触发焦点事件，点击文本框，里面的文字隐藏，点出去文字显示。

var inputname=document.getElementById("inputname");
 var buttonfont=document.getElementById("buttonfont");
 inputname.onclick=function(){
 /*console.log("文本框获得了焦点");*/ buttonfont.style.display="none";
 };
 inputname.onblur=function(){
 /*console.log("文本框失去了焦点");*/ buttonfont.style.display="block";
 };