Question

web前端，输入选择框选中状态下的css样式如何改

如图，
第一个输入框是选中状态的，第二个是没选中的
离开输入框后，样式又变回原来的，
请问这个能用css写吗，还是需要用到js
然后请问这么写

Answer 1

input:focus 缓橘{
 渗辩  丛哪缺 border-color: red;
}

Answer 2

<input type="text" onclick="this.style.border='型芦2px #cd1b1b solid';if(this.value=='enter your name'){this.value='';}" onblur="this.style.border='2px 漏散#000000 solid';"卜搜带 value="enter your name" style="border:2px #000 solid;"/><br /><br />
<input type="text" onclick="this.style.border='2px #cd1b1b solid';if(this.value=='password'){this.value='';}" onblur="this.style.border='2px #000000 solid';" value="password" style="border:2px #000 solid;"/>

把以上代码加到body里试一试 本应写成function 就是做个示意给你看看原理

顺便提一点 图上的圆角矩形 不知道是用css做的还是图片 css的可有难度哦

Answer 3

用:foucs 呗