Port.forumgreek.com
Θέλετε να αντιδράσετε στο μήνυμα; Φτιάξτε έναν λογαριασμό και συνδεθείτε για να συνεχίσετε.

Dark and Light Dropdown Lists

Επισκόπηση προηγούμενης Θ.Ενότητας Επισκόπηση επόμενης Θ.Ενότητας Πήγαινε κάτω

Port Admin
Port Admin
Admin
Αριθμός μηνυμάτων : 2651
Πόντοι : 6380
Ημερομηνία εγγραφής : 06/03/2017
https://port.forumgreek.com

ΔημοσίευσηPort Admin Τρι Μαρ 28, 2017 8:32 pm

Μια καθετί λίστα που κάνοντας κλικ αποκαλύπτεται. Και πολύ καλή εξοικονόμηση χορού.

Αντιγραφή επικόλληση τον παρακάτω κώδικα:

Κώδικας:

<style>
/*
* Copyright © 2012-2013 Thibaut Courouble
* http://www.cssflow.com
*
* Licensed under the MIT License:
* http://www.opensource.org/licenses/mit-license.php
*
* View the Sass/SCSS source at:
* http://www.cssflow.com/snippets/dark-and-light-dropdown-lists/demo/scss
*
* Original PSD by Hemn Chawroka: http://goo.gl/nXZHJ
*/ foulscode.blogspot.gr
*
*/
@import url(http://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css);
body {
font: 13px/20px "Lucida Grande", Tahoma, Verdana, sans-serif;
color: #404040;
background: #93cedf;
}
.container {
margin: 80px auto;
width: 400px;
text-align: center;
}
.container > .dropdown {
margin: 0 20px;
vertical-align: top;
}
.dropdown {
display: inline-block;
position: relative;
overflow: hidden;
height: 28px;
width: 150px;
background: #f2f2f2;
border: 1px solid;
border-color: white #f7f7f7 whitesmoke;
border-radius: 3px;
background-image: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.06));
background-image: -moz-linear-gradient(top, transparent, rgba(0, 0, 0, 0.06));
background-image: -o-linear-gradient(top, transparent, rgba(0, 0, 0, 0.06));
background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.06));
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
}
.dropdown:before, .dropdown:after {
content: '';
position: absolute;
z-index: 2;
top: 9px;
right: 10px;
width: 0;
height: 0;
border: 4px dashed;
border-color: #888888 transparent;
pointer-events: none;
}
.dropdown:before {
border-bottom-style: solid;
border-top: none;
}
.dropdown:after {
margin-top: 7px;
border-top-style: solid;
border-bottom: none;
}
.dropdown-select {
position: relative;
width: 130%;
margin: 0;
padding: 6px 8px 6px 10px;
height: 28px;
line-height: 14px;
font-size: 12px;
color: #62717a;
text-shadow: 0 1px white;
background: #f2f2f2; /* Fallback for IE 8 */
background: rgba(0, 0, 0, 0) !important; /* "transparent" doesn't work with Opera */
border: 0;
border-radius: 0;
-webkit-appearance: none;
}
.dropdown-select:focus {
z-index: 3;
width: 100%;
color: #394349;
outline: 2px solid #49aff2;
outline: 2px solid -webkit-focus-ring-color;
outline-offset: -2px;
}
.dropdown-select > option {
margin: 3px;
padding: 6px 8px;
text-shadow: none;
background: #f2f2f2;
border-radius: 3px;
cursor: pointer;
}
/* Fix for IE 8 putting the arrows behind the select element. */
.lt-ie9 .dropdown {
z-index: 1;
}
.lt-ie9 .dropdown-select {
z-index: -1;
}
.lt-ie9 .dropdown-select:focus {
z-index: 3;
}
/* Dirty fix for Firefox adding padding where it shouldn't. */
@-moz-document url-prefix() { .dropdown-select { padding-left: 6px; }}
.dropdown-dark { background: #444; border-color: #111111 #0a0a0a black; background-image: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.4)); background-image: -moz-linear-gradient(top, transparent, rgba(0, 0, 0, 0.4)); background-image: -o-linear-gradient(top, transparent, rgba(0, 0, 0, 0.4)); background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.4)); -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px 1px rgba(0, 0, 0, 0.2); box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px 1px rgba(0, 0, 0, 0.2);}
.dropdown-dark:before { border-bottom-color: #aaa;}
.dropdown-dark:after { border-top-color: #aaa;}
.dropdown-dark .dropdown-select { color: #aaa; text-shadow: 0 1px black; background: #444; /* Fallback for IE 8 */}
.dropdown-dark .dropdown-select:focus { color: #ccc;}
.dropdown-dark .dropdown-select > option { background: #444; text-shadow: 0 1px rgba(0, 0, 0, 0.4);}</style>
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Dark and Light Dropdown Lists</title>
<!--[if lt IE 9]><script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
<div class="container"> <div class="dropdown"> <select name="one" class="dropdown-select"> <option value="">Select…</option> <option value="1">Option #1</option> <option value="2">Option #2</option> <option value="3">Option #3</option> </select> </div> <div class="dropdown dropdown-dark"> <select name="two" class="dropdown-select"> <option value="">Select…</option> <option value="1">Option #1</option> <option value="2">Option #2</option> <option value="3">Option #3</option> </select> </div> </div></body></html>

Επισκόπηση προηγούμενης Θ.Ενότητας Επισκόπηση επόμενης Θ.Ενότητας Επιστροφή στην κορυφή

Δημιουργήστε έναν λογαριασμό ή συνδεθείτε για να απαντήσετε

Προκειμένου να απαντήσετε πρέπει να είστε μέλος.

Δημιουργία Λογαριασμού

Ενταχθείτε στην κοινότητά μας δημιουργώντας έναν λογαριασμό. Είναι πανεύκολο!


Δημιουργία ενός νέου Λογαριασμού

Σύνδεση

Έχετε ήδη έναν λογαριασμό; Κανένα πρόβλημα, συνδεθείτε εδώ.


Σύνδεση

 
Δικαιώματα σας στην κατηγορία αυτή
Δεν μπορείτε να απαντήσετε στα Θέματα αυτής της Δ.Συζήτησης