Showing posts with label fileupload control css. Show all posts
Showing posts with label fileupload control css. Show all posts

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: