Question

css相关,鼠标点击<input>输入域后出现有颜色的边框

css相关,鼠标点击<input>输入域后出现有颜色的边框，如果使用css，将这个鼠标点击输入域后产生的边框去掉呢？下面是截图
鼠标未点击前：

鼠标点击后：
　　根据大家的办法实现不了的，即使可以改变颜色，但是那条有颜色的线还是无法消除。下面是我的html和css代码：
　　html：
　　<input type="text" name="content" id="input_box">
　　css:
　　#input_box{
　　border-width:0;
　　border-color:white;
　　border-style:none;
　　background:none;
　　}
　　#input_box:focus{
　　border:0;
　　}





Answer 1

用:focus伪类就可以实现

input:focus {
	border: 2px solid yellow;
}

如上，可以根据自己的具体需求更改颜色、像素

要想美观的话，可以根据设计风格，添加border-radius属性来增加边角圆角效果

追问

还是实现不了，我把我的代码贴上来了，帮忙看下吧

追答

你是要去掉focus的效果啊。。。

那简单了。。

input:focus {
outline:none;
}

追问

按照你的指导已经实现了，谢谢啊，但是我还有个问题，就是开始时光标是占满整个输入域的宽度的，但是我在输入域中写入内容后，光标的底部就与输入域的底部有间隙了，这该如何使用css调整呢，使光标永远在输入域的中间，而不是偏向上方呢？下面是截图：

追答

这跟字号、字体，浏览器渲染引擎、系统字体渲染方式等因素共同影响的
有可能你这里看有问题，但是在别人那不一定有，所以很难处理
如果非要试试，调整input内字体的大小、行高、padding之类的试试吧

追问

恩，那我试试，谢谢了啊O(∩_∩)O

Answer 2

input:focus { color:yellow; } 可以用这个来，不过不是所有的浏览器都支持

Answer 3

我都是用js实现的，因为很多时候只用css会引起兼容问题。
<input style="width:200px; height:30px; border:1px solid #999;" onfocus="jia()" onblur="qu()" />
<script language="javascript">
function jia(){
document.getElementsByTagName('input')[0].style.border = '1px solid red';
}
function qu(){
document.getElementsByTagName('input')[0].style.border = '1px solid #999';
}
</script>

Answer 4

先要知道这个边框怎么产生的啊

Answer 5

把相关代码贴出来看看吧

追问

我已经把代码贴上来了，帮忙看下吧，谢谢啊

追答

你是在哪种浏览器中看到这个框的？