formattazione select tramite CSS

**kerbeross81** · 26-07-2014, 22:04

Ciao a tutti,
devo modificare un form aggiungendo, oltre ai campi di testo, anche un campo a tendina select.
ho provato a modificare il css aggiungendo select {.... } ma non ha funzionato.

Il codici HTML e CSS sono questi, mi basterebbe riuscire a trasformare il secondo campo (Last name) in un campo select che abbia la stessa formattazione degli altri, qualche consiglio? Grazie!

codice:

<!--
Author: W3layouts
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
-->
<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8">
        <link href="css/style.css" rel='stylesheet' type='text/css' />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
        <!--webfonts-->
        <link href='http://fonts.googleapis.com/css?family=Oxygen:400,300,700' rel='stylesheet' type='text/css'>
        <!--//webfonts-->
</head>
 
<body>
    <div class="main">
                 <!-----start-main---->
                 <div class="inset">
                     <div class="social-icons">
                         <div class="span"><a href="#"><img src="images/fb.png" alt=""/><i>Connect with Facebook </i><div class="clear"></div></a></div>    
                         <div class="span1"><a href="#"><img src="images/t-bird.png" alt=""/><i>Connect with Twitter</i><div class="clear"></div></a></div>
                         <div class="clear"></div>
                    </div>
                 </div>    
                 <h2>Or sign up with</h2>
                 <form>
                            <div class="lable">
                                 <input type="text" class="text" value="First Name" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'First Name';}" id="active">

                                 <input type="text" class="text" value="Last Name" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Last Name';}">
                            </div>
                            <div class="clear"> </div>
                            <div class="lable-2">
                            <input type="text" class="text" value="your@email.com " onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'your@email.com ';}">
                             <input type="password" class="text" value="Password " onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Password ';}">
                            </div>
                            <div class="clear"> </div>
                             <h3>By creating an account, you agree to our <span><a href="#">Terms & Conditions</a> <span></h3>
                                 <div class="submit">
                                    <input type="submit" onclick="myFunction()" value="Create account" >
                                </div>
                                    <div class="clear"> </div>
                             </form>
        <!-----//end-main---->
        </div>
         <!-----start-copyright---->
                       <div class="copy-right">
                        <p>Template by <a href="http://w3layouts.com">w3layouts</a></p> 
                    </div>
                <!-----//end-copyright---->
     
</body>
</html>

codice:

/*--
Author: W3layouts
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
--*/
/* reset */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,dl,dt,dd,ol,nav ul,nav li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;}
ol,ul{list-style:none;margin:0px;padding:0px;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
table{border-collapse:collapse;border-spacing:0;}
/* start editing from here */
a{text-decoration:none;}
.txt-rt{text-align:right;}/* text align right */
.txt-lt{text-align:left;}/* text align left */
.txt-center{text-align:center;}/* text align center */
.float-rt{float:right;}/* float right */
.float-lt{float:left;}/* float left */
.clear{clear:both;}/* clear float */
.pos-relative{position:relative;}/* Position Relative */
.pos-absolute{position:absolute;}/* Position Absolute */
.vertical-base{    vertical-align:baseline;}/* vertical align baseline */
.vertical-top{    vertical-align:top;}/* vertical align top */
nav.vertical ul li{    display:block;}/* vertical menu */
nav.horizontal ul li{    display: inline-block;}/* horizontal menu */
img{max-width:100%;}
/*end reset*/
/****-----start-body----****/
body{
    background:url(../images/bg.jpg)  no-repeat center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
     background-size: cover;
     background-position: center;
     background-size: 100% 100%;
    font-family: 'Oxygen', sans-serif;
}
.main{
    margin:7em auto 0;
    width:44%;
}
.inset {
    text-align: center;
    width: 100%;
}
.main h2,.main h3{
    font-size: 1em;
    text-align: center;
    color:#fff;
    padding:1em 0;
    font-family: 'Oxygen', sans-serif;
}
.main h3{
    font-size: 1em;
    text-align:left;
    font-family: 'Oxygen', sans-serif;
}
.main h3 span a{
    color:#1888A8;
    font-weight: bold;
}
.span {
    float:left;
    display: block;
    font-family: 'Oxygen', sans-serif;
    background:#3B5998;
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -ms-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    border:1px solid #3B5998;
    outline:none;
    width: 49.99%;
}
.span img {
    padding:11px 12px;
    float: left;
    
}
.span:hover{
    background:#5D7BBA;
    color:#fff;
}
.span i {
    color: #fff;
    padding: 14px 14px;
    float: left;
    font-size: 18px;
    font-family: 'Oxygen', sans-serif;
}
.span1 {
    font-family: 'Oxygen', sans-serif;
    float:right;
    transition: all 0.5s ease-out;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    background: #55ACEE;
    outline:none;
    width: 49.7%;
}
.span1 img {
    padding: 12px 24px;
    float:left;
}
.span1 i {
    color: #fff;
    padding: 15px 14px;
    float: left;
    font-size: 18px;
    font-family: 'Oxygen', sans-serif;
}
.span1:hover{
    background:#71B8ED;
    color:#fff;
}
.lable input[type="text"] {
    padding: 15px;
    width: 44%;
    font-size: 1.1em;
    margin: 18px 0px;
    color: #666666;
    float: left;
    cursor: pointer;
    font-family: 'Oxygen', sans-serif;
    outline: none;
    font-weight: 600;
    margin-left: 3px;
    background: #FFFFFF;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    border-left: 6px solid #fff;
    border-bottom: none;
    border-right: none;
    border-top: none;
}
.lable input[type="text"]:hover,.lable-2 input[type="text"]:hover,input[type="Password"]:hover,#active {
    color:#DCDCDC;
    border-left:6px solid#40A46F;
}
.lable-2 input[type="text"],input[type="Password"] { 
    padding: 14px;
    width: 94%;
    font-size: 1em;
    margin: 18px 0px;
    border:none;
    color: #666666;
    cursor: pointer;
    background: none;
    float: left;
    outline: none;
    font-weight: 700;
    font-family: 'Oxygen', sans-serif;
    background: #ffffff;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    border-left: 6px solid #fff;
    border-bottom: none;
    border-right: none;
    border-top: none;
}

.submit{
    padding:5px 4px;
    text-align: center;
}
input[type=submit] {
    padding: 17px 30px;
    color: #fff;
    float: right;
    font-family: 'Oxygen', sans-serif;
    background: #40A46F;
    border: 1px solid #40A46F;
    cursor: pointer;
    font-size: 18px;
    transition: all 0.5s ease-out;
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -ms-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    outline:none;
    width: 100%;
}

.submit input[type=submit]:hover {
     background:#07793D;
     border:1px solid #07793D;
}
/**start-copy-right**/
.copy-right {
    text-align: center;
    margin: 2em 0;
}
.copy-right p {
    color: #FFF;
    font-size:1em;
}
.copy-right p a {
    font-family: 'Oxygen', sans-serif;
    font-size:1em;
    font-weight:600;
    color:#55ACEE;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.copy-right a:hover{
    color:#fff;
}
/*----start-responsive design-----*/
@media (max-width:1440px){
    .main {
        width:46%;
        margin: 7em auto 0;
    }
}

@media (max-width:1366px){
    .main{
        width: 48%;
    }
    .span1 {
        width: 49.69%;
    }
}
@media (max-width:1280px){
    .main{
        width:53%;
    }
    
}
@media (max-width:1024px){
    .main{
        width: 66%;
        margin: 9em auto 0;
    }
    

}
@media (max-width:768px){
    .main {
    width:91%;
    margin: 6em auto 0;
    }
}

@media (max-width:640px){
    .main{
        width:90%;
        margin: 6em auto 0;
    }
    .span,.span1 {
        margin:0 auto;
        text-align:center;
        width: 100%;
        margin-bottom: 15px;
    }
    .main h2, .main h3 {
        padding: 0.5em 0;
        font-size: 1em;
    }
    .lable input[type="text"]:first-child {
    width: 92%;
    }
    .lable input[type="text"],.lable input[type="text"] {
        width:92%;
        font-size: 1em;
        text-align: left;
        margin: 10px 0px;
        margin-left:0;
    }
    .lable-2 input[type="text"], .lable-2 input[type="text"],input[type="Password"] { 
        width: 92.3%;
        font-size: 1em;
        margin: 10px 0px;
        text-align: left;
    }
    input[type=submit] {
        padding: 15px 15px;
        font-size: 1em;
        color: #fff;
        text-align:center;
        width: 100%;
    }
    .main h3 {
        text-align: center;
    }
}
@media (max-width:480px){
    .main{
        width:90%;
        margin: 6em auto 0;
    }
    .lable input[type="text"],.lable input[type="text"] {
        width:92%;
    
}
@media (max-width:320px){
    .main {
        width: 90%;
        margin: 3em auto 0;
    }
    .span i {
        font-size: 16px;
    }
    .span1 i {
        padding: 15px 0px;
        font-size: 16px;
    }
    .lable input[type="text"]:first-child {
        width: 90%;
        padding: 13px 10px;
    }
    .lable input[type="text"], .lable input[type="text"],.lable-2 input[type="text"], .lable-2 input[type="text"] { 
        width: 90%;
        font-size: 16px;
        padding:13px 10px;
    }
    input[type="Password"] {
        font-size: 16px;
        padding:13px 10px;
        width: 90%;
    }
    .main h3 {
    line-height: 28px;
    }
)

**Prill** · 28-07-2014, 16:28

Per una visualizzazione personalizzata che funzioni su tutti i browser non basteranno i solo css ma sarà necessario anche javascript (o jquery).
Per personalizzare su alcuni browser coi soli css puoi leggere questo

Discussione: formattazione select tramite CSS

Strumenti discussione

Ricerca discussione

Visualizza

formattazione select tramite CSS

Permessi di invio