使用文件上传的CSS

时间:2014-02-21 02:41:34

标签: html css

在这里完成菜鸟,我需要你的帮助。我明白了:

div#button_search {
    background: url(../_images/button_search.png);
    width: 145px;
    height: 34px;
    float: left;
    opacity: 1;
    transition: opacity .40s ease-in-out;
    -moz-transition: opacity .40s ease-in-out;
    -webkit-transition: opacity .40s ease-in-out;
}

div#button_search:hover {
    background: url(../_images/button_search.png);
    width: 145px;
    height: 34px;
    float: left;
    opacity: 0.8;
    transition: opacity .40s ease-in-out;
    -moz-transition: opacity .40s ease-in-out;
    -webkit-transition: opacity .40s ease-in-out;
}

input{
    position: relative;
    text-align: right;
    -moz-opacity:0 ;
    filter:alpha(opacity: 0);
    opacity: 0;
    z-index: 2;
    width: 529px
}

div#files_innerdrop {
    background: #e5e5e5;
    width: 368px;
    height: 20px;
    float: right;
    margin-top: 4px;
    margin-right: 4px;
    padding-top: 6px;
    padding-left: 5px;
}

HTML

<div id="inner_backdrop">
        <div id="files_bar">
            <div id="button_search"><input type="file" id="button_search"/></div>
            <div id="files_innerdrop">

            </div>
        </div>

但它显示了这一点:enter image description here

我希望“选择文件”成为“搜索”图像,以及要在该栏中显示的文本。有任何想法吗?你们可以引导我对如何做到这一点?

1 个答案:

答案 0 :(得分:0)

on按钮使用样式css使其隐藏

      Style="display:none;"

单击锚图像,您可以通过脚本单击该按钮

    <a onclick="your script here" ><img src="abc.jpg" /></a>