如何用css改变输入框样式

html-css010

如何用css改变输入框样式,第1张

中文字符的中线和英文字符的中线定义是不一样的，你在设置输入框与文本居中对齐的时候，最好将文本的字体样式设置成英文字体，比如font-family:verdana这样有助于解决中线问题。然后再给输入框添加 vertical-align:middle样式。

注意，由于涉及到中线问题，所以字号会影响对齐的效果。例子就不举了，你可以改变字号（12px、13px等）自己尝试一下。

边框是蓝色，看起来很干净。这样的表单做出来页面效果很好。我用过这样的。 <style type="text/css"><!-- .up { border: 1px solid #ccddffcolor:#999999 } .over { border: 1px solid #3366ffcolor:#333333 } --></style><script>var LastInput=null var OnInput=0 function chinput(){ if (LastInput!=null &&event.srcElement.tagName!="INPUT") {LastInput.className="up"LastInput=nullOnInput=0} if (event.srcElement.tagName=="INPUT" &&event.srcElement.type=="text" &&OnInput==0) { event.srcElement.className="over" LastInput=event.srcElement OnInput=1 } } document.onmousemove=chinput </script><input name="textfield" type="text" class="up">

使用css样式直接可以改变input的样式的，input属于行内替换元素height/width/padding/margin均可用，效果等于块元素。

工具原料：编辑器、浏览器

1、设置一个宽度是宽度500px，高度50px，边框是红色的input输入框的代码如下：

<body>

<input type="text" />

<style>

input{

width: 500px

height: 50px

border: 1px solid red

}

</style>

</body>

2、运行的效果如下图：