Monday, June 1, 2015

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>
Change the by default text of browse button of Fileupload


1 comment: