文章/答案/技术大牛

发布

问隐藏输入图像URL
EN

Stack Overflow用户

提问于 2014-11-22 16:09:02

回答 1查看 2.1K关注 0票数 0

我正在使用以下代码更改输入文件类型的外观，我刚刚更改了输入选择类型作为图像，我的问题是如何隐藏输入图像URL HTML

<form action="for.php" method="POST" enctype="multipart/form-data">
        <input type="file" name="files[]" multiple id="files" class="hidden"/>
        <input type="submit" id="sub"/>
    </form>

CSS

input[type="file"] {
            border: 1px gray dashed;
            background:no-repeat center gainsboro;
            text-indent: -9999em;
            line-height:3000;
            width: 128px;
            height: 128px;
        }

如何在选定后隐藏图像名称

html

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-11-22 17:06:32

只需跳过上面的代码并使用以下代码

<form action="for.php" method="POST" enctype="multipart/form-data">
        <div class="inputWrapper">
            <input type="file" name="files[]" multiple id="files" class="hidden fileInput"/>
        </div>
        <input type="submit" id="sub">
    </form>

CSS

.inputWrapper {
            overflow: hidden;
            position: relative;
            cursor: pointer;
            background-color: #DDF;
            border: 1px gray dashed;
            background: url('file_add.png') no-repeat center gainsboro;
            text-indent: -9999em;
            width: 200px;
            height: 200px;
        }

        .fileInput {
            cursor: pointer;
            height: 100%;
            position:absolute;
            top: 0;
            right: 0;
            font-size:50px;
        }
        .hidden {
            opacity: 0;
            -moz-opacity: 0;
            filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0)
        }

输出

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/27079448

复制

相似问题

问隐藏输入图像URL
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问隐藏输入图像URLEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问隐藏输入图像URL
EN