0

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

5
  • You're trying to hide an <input type="image" /> element? Commented Nov 22, 2014 at 16:15
  • can help me how to hide URL of image for the above code Commented Nov 22, 2014 at 16:18
  • 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. 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 Commented Nov 22, 2014 at 16:22
  • @DavidThomas check my question how do i hide image name Commented Nov 22, 2014 at 16:29

1 Answer 1

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

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

1 Comment

how can i hide with using only css

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.