LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

Custom select with one image, the arrow.

Custom select with no images. The arrow is created using :after and the triangle trick.
caveat: if the browser doesn't support the `pointer-events` css property, the user wont be able to click on the arrow.

CSS
.select-fancy {
  display: inline-block;
  border: 1px solid #e5e5e5;
  position: relative;
  border-radius: 5px;
  width: 100px;
  overflow: hidden;
  box-shadow: inset 0 -2px 5px rgba(255, 255, 255, 0.4);
}
.select-fancy, .select-fancy > * {
  cursor: pointer;
}
.select-fancy select {
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  background: transparent;
  border: 0;
  outline: 0;
  text-shadow: 1px 1px rgba(255, 255, 255, 0.7);
  padding: 6px 0 6px 8px;
  font-size: 12px;
  width: 120%;
  height: 17px;
  -webkit-user-select: none;
  -moz-user-select: -moz-none;
  -ms-user-select: none;
  user-select: none;
  -webkit-appearance: none;
  -moz-appearance: radio-container;
  appearance: none;
}

.select-fancy-image {
  background: url("http://css.yipitcdn.com/img/arrow-down.png") no-repeat right;
  background: url("http://css.yipitcdn.com/img/arrow-down.png") no-repeat center right, url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2U3ZTdlNyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background: url("http://css.yipitcdn.com/img/arrow-down.png") no-repeat center right, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e7e7e7));
  background: url("http://css.yipitcdn.com/img/arrow-down.png") no-repeat center right, -moz-linear-gradient(#ffffff, #e7e7e7);
  background: url("http://css.yipitcdn.com/img/arrow-down.png") no-repeat center right, -webkit-linear-gradient(#ffffff, #e7e7e7);
  background: url("http://css.yipitcdn.com/img/arrow-down.png") no-repeat center right, linear-gradient(#ffffff, #e7e7e7);
}

.select-fancy-noimage {
  background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2U3ZTdlNyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e7e7e7));
  background: -moz-linear-gradient(#ffffff, #e7e7e7);
  background: -webkit-linear-gradient(#ffffff, #e7e7e7);
  background: linear-gradient(#ffffff, #e7e7e7);
}
.select-fancy-noimage:after {
  content: '';
  width: 0;
  position: absolute;
  right: 7px;
  top: 50%;
  margin-top: -3px;
  border-width: 6px 4px;
  border-style: solid;
  pointer-events: none;
  border-color: #656565 transparent transparent transparent;
}

body {
  font-family: arial;
}

h3 {
  font-weight: 400;
}
Host Instantly Drag and Drop Website Builder

 

Description

An implementation of a pure CSS, cross-browser custom element.
Term
Mon, 11/27/2017 - 21:52

Related Codes

Pen ID
Pen ID
Pen ID