Change the by default text of browse button of Fileupload - Free Asp.Net,MVC,AngularJs,Jquery,Javascript,Sql Server,WCF,Entity framework snippets and tutorial

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


What do you think about this article?

If you found this article useful, please share and follow on Facebook, Twitter, Google Plus and other social media websites. To get free updates subscribe to newsletter. Please put your thoughts and feedback in comments section.

Share this

Share on FacebookTweet on TwitterPlus on Google+

1 comments:


EmoticonEmoticon