How to Customize the File Input Button and Hide the Textbox in HTML?-CSS Tutorial-php.cn

How to Customize the File Input Button and Hide the Textbox in HTML?

Patricia Arquette

Release： 2024-11-01 16:51:02

Original

820 people have browsed it

How to Customize the File Input Button and Hide the Textbox in HTML?

How to Style to Hide the Textbox and Display Only the Button

Styling can be challenging, especially when attempting to hide the textbox and display only the button.

CSS Solution

To achieve the desired effect using CSS, consider the following code:

<code class="html"><html>
    <style type="text/css">
        div.fileinputs {
            position: relative;
        }

        div.fakefile {
            position: absolute;
            top: 0px;
            left: 0px;
            z-index: 1;
        }

        div.fakefile input[type=button] {
            /* enough width to completely overlap the real hidden file control */
            cursor: pointer;
            width: 148px;
        }

        div.fileinputs input.file {
            position: relative;
            text-align: right;
            -moz-opacity:0 ;
            filter:alpha(opacity: 0);
            opacity: 0;
            z-index: 2;
        }
    </style>

    <div class="fileinputs">
        <input type="file" class="file" />

        <div class="fakefile">
            <input type="button" value="Select file" />
        </div>
    </div>
</html></code>

Copy after login

This CSS code creates a fakefile button that overlaps the real file input and hides the text box using opacity: 0;.

The above is the detailed content of How to Customize the File Input Button and Hide the Textbox in HTML?. For more information, please follow other related articles on the PHP Chinese website!