Wednesday, September 7, 2016

css for file upload control in asp.net

In this article, I am going to explain how to implement css design in file upload control in asp.net.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="FileUploadStyle.aspx.cs" Inherits="FileUploadStyle" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style>
 /* { box-sizing: border-box; margin: 0; padding: 0; }
div { margin: 8px; }*/
input[type=file], input[type=file] + input {
    display: inline-block;
    background-color: #CC3;
    border: 1px solid #CC3;
    font-size: 15px; padding: 4px;
       cursor: pointer;
}
input[type=file] + input {
    padding: 13px;
    background-color: #00b7cd;
}
::-webkit-file-upload-button {
    -webkit-appearance: none;
    background-color: #CC3;
    border: 1px solid #CC3;
    font-size: 15px; padding: 8px;
       cursor: pointer;
}
::-ms-browse {
    background-color: #00b7cd;
    border: 1px solid #CC3;
    font-size: 15px; padding: 8px;
}
input[type=file]::-ms-value { border: none;  }
.test-head {
    position: relative
}
 
.test-head p {
font-size: 20px;
color: #353535;
font-weight: bold;
background: #CCCC33;
line-height: 60px;
display: inline-block;
padding-right: 24em;
position: relative;
margin-top: 0px;
}
 
.test-head:before {
    content: "";
    position: absolute;
    width: 50%;
    height: 100%;
    max-width: 260px;
    background: #CCCC33;
    top: 0;
    left: 0;
    z-index:0
}
 
.test-head p:after {
    content: " ";
    display: block;
    background: #CCCC33;
    position: absolute;
    bottom: 0px;
    right: -50px;
    border-top: 30px solid transparent;
    border-bottom: 30px solid transparent;
  
}
  </style>
</head>
<body>
    <form id="form1" runat="server">
    <fieldset>
    <legend>File Upload Control Css Style</legend>
    <asp:FileUpload ID="flbupload" runat="server" />
      </fieldset>
    </form>
</body>
</html>

Output:



No comments:

Post a Comment