Hide input image URL

Question

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

I don't understand your question, so I can't help you. I think you should ask a colleague, or friend, that's more fluent in English to help you translate, and better-explain, your question. As it is it's extremely difficult to understand. — David Thomas
– David Thomas, Commented Nov 22, 2014 at 16:20
when i choose image in input box , image url is displayed is there any way to hide to image name — user4256522
– user4256522, Commented Nov 22, 2014 at 16:22

sanoj lawrence · Accepted Answer · 2014-11-22 17:06:32Z

1

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

answered Nov 22, 2014 at 17:06

sanoj lawrence

1,0105 gold badges32 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user4256522 Over a year ago

how can i hide with using only css

Collectives™ on Stack Overflow

Hide input image URL

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related