如何用CSS修改提交按钮样式

html-css021

如何用CSS修改提交按钮样式,第1张

非IE6浏览器，可以使用input:hover的伪类来控制样式，但IE6浏览器只能用JS来实现了，需要设定两个状态，然后用JS切换类。

<style>

#c_button { width:92pxheight:30px border:0float:left}

.c_up{background:url(../images/i_login_btn.png) no-repeat 0 top}

.c_down{background:url(../images/i_login_btn.png) no-repeat 0 bottom}

</style>

<input name="" id="c_button" class="c_up" type="submit" value="" title="点击登录"/>

<script type="text/javascript">

document.getElementById("c_button").onmouseover=function() {this.className = "c_down"}

document.getElementById("c_button").onmouseout=function(){this.className = "c_up"}

</script>

<input

type="submit"

name="button"

id="button"

value="提交"

style="

border:none

height:20px

width:100px

background:url(img134.tif)"

/>

在style中加入css就可以，需要注意的一点是，加背景图片的时候，边框按自己需求显示，默认是有边线的，

即border:的设置

<style>

.btn-submit{

width: 120px

height: 30px

line-height:30px

font-size: 14px

font-family: '微软雅黑'

padding: 0

marging: 0

border: 1px solid #04d

background: #06f

}

</style>

<input type="submit" class="btn-submit" value="提交" >