de.knightsoftnet.mtwidgets.client.ui.widget.styling.SelectBoxInputStyle.gss Maven / Gradle / Ivy

Go to download
.selectBox {
  height: 2em;
  line-height: 2em;
  vertical-align: middle;
  position: relative;
  background: white;
  border: 1px solid #ccc;
  overflow: hidden;
}

.selectBox::after {
  content: "▼";
  font-size: 0.5em;
  font-family: arial;
  position: absolute;
  top: 50%;
  right: 5px;
  transform: translate(0, -50%);
}

.selectBoxSelected::after {
  content: "";
}

.selectBoxSelected {
  overflow: visible;
}

.selectBoxSelected .options .option label {
  display: inline-block;
}

.selectBox .options .option label img {
  height: 1.7em;
  float: left;
}
	
.selectBoxSelected .options {
  background: white;
  border: 1px solid #ccc;
  position: absolute;
  top: -1px;
  left: -1px;
  width: 100%;
  height: 8em;
  overflow-y: scroll;
}

.selectBox .options .option {
  overflow: hidden;
}

.selectBoxSelected .options .option {
  height: 22px;
  overflow: hidden;
}

.selectBox .options .option img {
  vertical-align: middle;
}

.selectBox .options .option label {
  display: none;
}

.selectBox .options .option input {
  width: 0;
  height: 0;
  overflow: hidden;
  margin: 0;
  padding: 0;
  float: left;
  display: inline-block;
  /* fix specific for Firefox */
  position: absolute;
  left: -10000px;
}

.selectBox .options .option input:checked + label {
  display: block;
  width: 100%;
}

.selectBoxSelected .options .option input + label {
  display: block;
}

.selectBoxSelected .options .option input:checked + label {
  background: #fffff0;
}