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

html-css019

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

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

<style>

.btn{position: relativeoverflow: hiddenmargin-right: 4pxdisplay:inline-block*display:inlinepadding:4px 10px 4pxfont-size:14pxline-height:18px*line-height:20pxcolor:#ffftext-align:centervertical-align:middlecursor:pointerbackground-color:#5bb75bborder:1px solid #ccccccborder-color:#e6e6e6 #e6e6e6 #bfbfbfborder-bottom-color:#b3b3b3-webkit-border-radius:4px-moz-border-radius:4pxborder-radius:4px}

.btn input {position: absolutetop: 0 right: 0margin: 0border: solid transparentopacity: 0filter:alpha(opacity=0) cursor: pointer}

</style>

<div id="up_btn" class="btn">

<span>添加图片</span>

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

</div>

直接写CSS样式是不行的

<input type="text" size="20" name="upfile" id="upfile" style="border:1px dotted #ccc">

<input type="button" value="浏览" onclick="path.click()" style="border:1px solid #cccbackground:#fff">

<input type="file" id="path" style="display:none" onchange="upfile.value=this.value">

写成这样，用一个text和一个button替代file，然后让file隐藏

给按钮添加css样式有以下三种方法：

1，直接在元素上定义style，如下：

<input type="button" style="这里定义样式">

2，页面中内嵌样式，如下：

<style>

    .btn{需要添加的样式}

</style>

<input type="button" class="btn">

3，外部引用css文件，如下：

<link rel="stylesheet" type="text/css" href="这里是css文件的路径">