Change the by default text of browse button of Fileupload

Introduction: In this article I will explain how to change the by default text of of browse button of fileupload control in asp.net or input

Description:

When we use the fileupload control or input, commonly see a text Choose File, No file chosen on browser. We can change the by default text of browse button of fileupload control or input type file. In this example I will change the text Choose File to Change Picture using CSS. To implement follow the below given steps:

Step 1: Add the below given CSS code to StyleSheet or in head tag of webpage:

<style>

div.custom_file_upload {

            width: 50px;

            height: 20px;

            margin: 20px 0;

}

div.file_upload {

            width: 120px;

            height: 24px;

            background: #7abcff;

            background: -moz-linear-gradient(top,  #7abcff 0%, #60abf8 44%, #4096ee 100%);

            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7abcff), color-stop(44%,#60abf8), color-stop(100%,#4096ee));

            background: -webkit-linear-gradient(top,  #7abcff 0%,#60abf8 44%,#4096ee 100%);

            background: -o-linear-gradient(top,  #7abcff 0%,#60abf8 44%,#4096ee 100%);

            background: -ms-linear-gradient(top,  #7abcff 0%,#60abf8 44%,#4096ee 100%);

            background: linear-gradient(top,  #7abcff 0%,#60abf8 44%,#4096ee 100%);

            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7abcff', endColorstr='#4096ee',GradientType=0 );

            display: inline;

            position: absolute;

            overflow: hidden;

            cursor: pointer;        

            -webkit-border-top-right-radius: 5px;

            -webkit-border-bottom-right-radius: 5px;

            -moz-border-radius-topright: 5px;

            -moz-border-radius-bottomright: 5px;

            border-radius: 5px;

            font-weight: bold;

            color: #FFF;

            text-align: center;

            padding-top: 8px;

}

div.file_upload:before {

            content: 'Change Picture';

            position: absolute;

            left: 0; right: 0;

            text-align: center;     

            cursor: pointer;

}

div.file_upload input {

            position: relative;

            height: 30px;

            width: 250px;

            display: inline;

            cursor: pointer;

            opacity: 0;

}

      </style>

Step 2: Add the CSS class brfore the fileupload or input as given below:

<div class="custom_file_upload">

            <div class="file_upload">

        <asp:FileUpload ID="file_upload" runat="server"  />

            </div></div>