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

html-css040

如何用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代码的时候要注意，如果背景图中带边框，一定要将输入框的边框去掉，否则会显示默认边框；其次还要将高度和行高定义好，否则点击输入框后文字的位置会很难看。

<asp:Button class="blue" ID="txtSubmit" runat="server" OnClientClick="return chkReg()" Text="确 定"

Height="30px" OnClick="txtSubmit_Click" />

给这个asp控件加一个class="blue"就行

给type为image的input 添加onclick事件：

<form name="RedForm" action="#" >

<input type="image" name="..." src="..." onClick="document.formName.submit()">

</form>

fromName是表单的name属性。

这段代码没有问题。复制测试是可以正常运行的。所以JavaScript出错应该是Javascript代码写错。

扩展资料：

美化提交按钮的另一个方法：

用css为按钮设置背景图片。

提交按钮的class为formsubmit：

.formsubmit{

background:url(../button.png) no-repeat bottom left

width:247px

height:60px

cursor:pointer

border:0px

}

设置鼠标经过的效果：

.formsubmit:hover{

background:url(../button_2.png)

}