CODEWITHSUNDEEP
htmlcss
user4256522
user4256522

Reputation:

Hide input image URL

Am using the following code to change look of input file type, i just changed input select type as image and my problem is How can i hide input image 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;
        }

enter image description here

How do i hide image name after selected

Upvotes: 0

Views: 2489

Answers (1)

sanoj lawrence
sanoj lawrence

Reputation: 993

Just skip above code and use following code

HTML

<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)
        }

OUTPUT enter image description here

Upvotes: 1

Related Questions