Home > Article > Web Front-end > How to Customize the File Input Button and Hide the Textbox in HTML?

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

Patricia ArquetteOriginal: 2024-11-01 16:51:02804browse

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>

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!

css html using this display input

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to Achieve a Seamless Infinity Loop Image Slider Using JavaScript/jQuery?Next article：How to Achieve a Seamless Infinity Loop Image Slider Using JavaScript/jQuery?

See more

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

Related articles