I forum Ricerca FAQ
Fai una domanda
Ultimo messaggio
malo
malo
l'8 ottobre 2015 alle 11:38
10 messaggi dal 19 maggio 2015
ciao ragazzi, volevo solo sapere se era possibile modificare l'aspetto del file upload solo con css. é possibile? se si come?
grazie per l'aiuto ciao
RispondiQuoting
MdmSoft
MdmSoft
l'8 ottobre 2015 alle 15:44
10 messaggi dal 15 giugno 2011
www.mdmsoft.it
Prova questo esempio

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="fileupload.aspx.cs" Inherits="fileupload" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
        body {
            font-family: 'Lucida Grande', 'Helvetica Neue', sans-serif;
            font-size: 13px;
        }

        div.custom_file_upload {
            width: 230px;
            height: 20px;
            margin: 40px auto;
        }

        input.file {
            width: 150px;
            height: 20px;
            border: 1px solid #BBB;
            border-right: 0;
            color: #888;
            padding: 5px;
            -webkit-border-top-left-radius: 5px;
            -webkit-border-bottom-left-radius: 5px;
            -moz-border-radius-topleft: 5px;
            -moz-border-radius-bottomleft: 5px;
            border-top-left-radius: 5px;
            border-bottom-left-radius: 5px;
            outline: none;
        }

        div.file_upload {
            width: 80px;
            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-top-right-radius: 5px;
            border-bottom-right-radius: 5px;
            font-weight: bold;
            color: #FFF;
            text-align: center;
            padding-top: 8px;
        }

            div.file_upload:before {
                content: 'UPLOAD';
                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>
</head>
<body>
    <form id="form1" runat="server">
        <div class="custom_file_upload">
            <input type="text" class="file" name="file_info" />
            <div class="file_upload">
                <input type="file" id="file1" name="file_upload" />
            </div>
        </div>
    </form>
</body>
</html>


fonte: http://cssdeck.com/labs/custom-css-file-upload-form-control
RispondiQuoting

Torna al forum | Feed RSS

ASPItalia.com non è responsabile per il contenuto dei messaggi presenti su questo servizio, non avendo nessun controllo sui messaggi postati nei propri forum, che rappresentano l'espressione del pensiero degli autori.