网站建设资讯

NEWS

网站建设资讯

css修改上传按钮样式,css提交按钮样式

CSS上传按钮样式,把上传按钮做成这样,要怎么写样式

首先用PHOTOSHOP做出你想要的样式的图片。具体代码,我就把我以前写的CSS样式表发给你看看,仅供参考。 .btn1 {

成都创新互联公司主营右江网站建设的网络公司,主营网站建设方案,app软件定制开发,右江h5小程序开发搭建,右江网站营销推广欢迎右江等地区企业咨询

height: 20px;

width: 60px;

background-image: url(img/search.jpg);

background-repeat: no-repeat;

background-position: center center;

background-color: transparent;

border-top-style: none;

border-right-style: none;

border-bottom-style: none;

border-left-style: none;

}你只需要把背景图片更改成你的图片就可以了(需要注意图片文件和网页文件保存的位置)。

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

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

style

#c_button { width:92px; height:30px; border:0; float: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

上传图片的按钮能用css写出自定义的样式吗

1.可以利用css的定位元素来实现。

style

.btn{position: relative;overflow: hidden;margin-right: 4px;display:inline-block;*display:inline;padding:4px 10px 4px;font-size:14px;line-height:18px;*line-height:20px;color:#fff;text-align:center;vertical-align:middle;cursor:pointer;background-color:#5bb75b;border:1px solid #cccccc;border-color:#e6e6e6 #e6e6e6 #bfbfbf;border-bottom-color:#b3b3b3;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}

.btn input {position: absolute;top: 0; right: 0;margin: 0;border: solid transparent;opacity: 0;filter:alpha(opacity=0); cursor: pointer;}

/style

div id="up_btn" class="btn"

span添加图片/span

input id="photoimg" type="file" name="photoimg"

/div


当前文章:css修改上传按钮样式,css提交按钮样式
文章转载:http://cdweb.net/article/dsdjdde.html