استایل زیبا برای Select ( نمونه 8)

body {

background-color: #415c71;

color: #fefef8;

text-align: center;

padding-top: 80px;

}

/* Default custom select styles */

div.cs-select {

display: inline-block;

vertical-align: middle;

position: relative;

text-align: left;

background: #fff;

z-index: 100;

width: 100%;

max-width: 500px;

-webkit-touch-callout: none;

-webkit-user-select: none;

-khtml-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

user-select: none;

}

div.cs-select:focus {

outline: none; /* For better accessibility add a style for this in your skin */

}

.cs-select select {

display: none;

}

.cs-select span {

display: block;

position: relative;

cursor: pointer;

padding: 1em;

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

}

/* Placeholder and selected option */

.cs-select > span {

padding-right: 3em;

}

.cs-select > span::after,

.cs-select .cs-selected span::after {

speak: none;

position: absolute;

top: 50%;

-webkit-transform: translateY(-50%);

transform: translateY(-50%);

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

}

.cs-select > span::after {

content: '25BE';

right: 1em;

}

.cs-select .cs-selected span::after {

content: '2713';

margin-left: 1em;

}

.cs-select.cs-active > span::after {

-webkit-transform: translateY(-50%) rotate(180deg);

transform: translateY(-50%) rotate(180deg);

}

/* Options */

.cs-select .cs-options {

position: absolute;

overflow: hidden;

width: 100%;

background: #fff;

visibility: hidden;

}

.cs-select.cs-active .cs-options {

visibility: visible;

}

.cs-select ul {

list-style: none;

margin: 0;

padding: 0;

width: 100%;

}

.cs-select ul span {

padding: 1em;

}

.cs-select ul li.cs-focus span {

background-color: #ddd;

}

/* Optgroup and optgroup label */

.cs-select li.cs-optgroup ul {

padding-left: 1em;

}

.cs-select li.cs-optgroup > span {

cursor: default;

}

/* cs-skin-border */

@font-face {

font-family: 'icomoon';

src:url('fonts/icomoon.eot?-rdnm34');

src:url('fonts/icomoon.eot?#iefix-rdnm34') format('embedded-opentype'),

url('fonts/icomoon.woff?-rdnm34') format('woff'),

url('fonts/icomoon.ttf?-rdnm34') format('truetype'),

url('fonts/icomoon.svg?-rdnm34#icomoon') format('svg');

font-weight: normal;

font-style: normal;

}

div.cs-skin-circular {

background: transparent;

font-size: 2em;

font-weight: 700;

width: auto;

margin-top: 3em;

}

.cs-skin-circular > span {

background: transparent;

width: 100px;

height: 100px;

text-align: center;

padding: 0;

text-indent: 100%;

box-shadow: inset 0 0 0 5px #fefef8;

border-radius: 50%;

-webkit-transition: -webkit-transform 0.2s ease-out;

transition: transform 0.2s ease-out;

}

@media screen and (max-width: 30em) {

.cs-skin-circular > span { width: 80px; height: 80px; }

}

.cs-skin-circular > span::after {

font-family: 'icomoon';

content: 'e00f';

right: 0;

width: 100%;

text-indent: 0;

}

.cs-skin-circular.cs-active > span::after {

-webkit-transform: translate3d(0,-50%,0);

transform: translate3d(0,-50%,0);

}

.cs-skin-circular > span[style]::after {

content:'';

}

.cs-skin-circular .cs-selected span::after {

content: '';

}

.cs-skin-circular.cs-active > span {

-webkit-transform: scale3d(0.75,0.75,1);

transform: scale3d(0.75,0.75,1);

}

.cs-skin-circular .cs-options {

width: 100%;

height: 100%;

top: 0;

color: #415c71;

background: transparent;

overflow: visible;

font-size: 50%;

opacity: 0;

pointer-events: none;

-webkit-transition: opacity 0.3s, visibility 0s 0.3s;

transition: opacity 0.3s, visibility 0s 0.3s;

}

.cs-skin-circular.cs-active .cs-options {

opacity: 1;

-webkit-transition: opacity 0.3s;

transition: opacity 0.3s;

}

.cs-skin-circular .cs-options ul,

.cs-skin-circular .cs-options li {

position: absolute;

width: 100%;

height: 100%;

}

.cs-skin-circular .cs-options li {

-webkit-transform-origin: 50% 50%;

transform-origin: 50% 50%;

border-radius: 50%;

opacity: 0;

cursor: pointer;

pointer-events: auto;

background-repeat: no-repeat;

background-position: 50% 50%;

-webkit-transition: -webkit-transform 0.3s, opacity 0.1s;

transition: transform 0.3s, opacity 0.1s;

}

.cs-skin-circular.cs-active .cs-options li {

opacity: 1;

-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;

transition: transform 0.3s, opacity 0.3s;

}

.cs-skin-circular.cs-active .cs-options li:hover {

opacity: 0.7;

}

.cs-skin-circular .cs-options li:first-child { background-image: url(img/1.png); }

.cs-skin-circular .cs-options li:nth-child(2) { background-image: url(img/2.png); }

.cs-skin-circular .cs-options li:nth-child(3) { background-image: url(img/3.png); }

.cs-skin-circular .cs-options li:nth-child(4) { background-image: url(img/4.png); }

.cs-skin-circular .cs-options li:nth-child(5) { background-image: url(img/5.png); }

.cs-skin-circular .cs-options li:nth-child(6) { background-image: url(img/6.png); }

.cs-skin-circular .cs-options li:nth-child(7) { background-image: url(img/7.png); }

.cs-skin-circular .cs-options li:nth-child(8) { background-image: url(img/8.png); }

.cs-skin-circular.cs-active .cs-options li:first-child {

-webkit-transform: translate3d(0, -160px, 0);

transform: translate3d(0, -160px, 0);

}

.cs-skin-circular.cs-active .cs-options li:nth-child(2) {

-webkit-transform: translate3d(113.14px, -113.14px, 0);

transform: translate3d(113.14px, -113.14px, 0);

}

.cs-skin-circular.cs-active .cs-options li:nth-child(3) {

-webkit-transform: translate3d(160px, 0, 0);

transform: translate3d(160px, 0, 0);

}

.cs-skin-circular.cs-active .cs-options li:nth-child(4) {

-webkit-transform: translate3d(113.14px, 113.14px, 0);

transform: translate3d(113.14px, 113.14px, 0);

}

.cs-skin-circular.cs-active .cs-options li:nth-child(5) {

-webkit-transform: translate3d(0, 160px, 0);

transform: translate3d(0, 160px, 0);

}

.cs-skin-circular.cs-active .cs-options li:nth-child(6) {

-webkit-transform: translate3d(-113.14px, 113.14px, 0);

transform: translate3d(-113.14px, 113.14px, 0);

}

.cs-skin-circular.cs-active .cs-options li:nth-child(7) {

-webkit-transform: translate3d(-160px, 0, 0);

transform: translate3d(-160px, 0, 0);

}

.cs-skin-circular.cs-active .cs-options li:nth-child(8) {

-webkit-transform: translate3d(-113.14px, -113.14px, 0);

transform: translate3d(-113.14px, -113.14px, 0);

}

.cs-skin-circular .cs-options li span {

display: none;

}

.cs-skin-circular .cs-options li.cs-focus {

background-color: transparent;

opacity: 0.7;

}

- - , .