如何用CSS美化输入框的方法

html-css012

如何用CSS美化输入框的方法,第1张

为了达到更好的交互效果，提高用户友好度，对文本框输入框之类的美化工作是很必要的。一般的美化工作可以直接通过使用CSS完成，方法也十分简单，如下：1、首先制作一张输入框的背景图，如上图所示。2、添加按钮的Html代码：<input type=button class=Selectbg3、然后用css代码将它定义：<stylebody{font-size:12px }.Selectbg{border:nonewidth:150px height:20px background-image:url(image.gif) text-align:leftline-height:20px }</style在写CSS代码的时候要注意，如果背景图中带边框，一定要将输入框的边框去掉，否则会显示默认边框；其次还要将高度和行高定义好，否则点击输入框后文字的位置会很难看。

用CSS怎么能写输入框呢，CSS只是用来写样式的。要写输入框就用HTML的<input>标签。例如：

<input type="text" name="username" />

<input type="password" name="password">

input[type="text"]:focus, input[type="password"]:focus, textarea:focus, select:focus

{

border-color: #6699FF

box-shadow: 0 1px 2px #6699FF inset

}

你的意思是 输入框得到焦点之后 ，出现橙色边框吧！！！ 上面这段代码你可以试试 ，用火狐浏览器或者谷歌浏览器试吧。边框的阴影效果，不是所有的浏览器都能支持的。