Formular Stylen mit Support für IE 8 und IE 9 (Beispiel)

Aus Wikizone
Wechseln zu: Navigation, Suche

Quelle des zugrundeliegenden Sourcecode: https://blog.kulturbanause.de/2015/03/formular-styling-mit-css-select-listen-radio-buttons-und-checkboxen-individuell-gestalten/ (2017)

Allgemein[Bearbeiten]

Selectboxen[Bearbeiten]

/* SELECT BOX */
/* remove standard browser styles */
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border:none;
  border-radius: 0;
  font-size: 1em;
  width: 100%
} 

/* styling */
select {
  width:100%;
  border: 1px solid #bbb;
  padding:.75em 1em .5em 1em;
  box-shadow: 0 2px 1px 0 rgba(0,0,0,0.2);
  background-color:white;
  background-image:url(select-arrow.png);
  background-position: right;
  background-repeat: no-repeat;
}

select:hover {
  box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1);
}

/* hide browser-styling (arrow) in IE10 */
select::-ms-expand {
  display:none;
}
/* IE 8 & 9 no arrow removal -> no bg Img replacement */
.lt-ie10 select {
    background-image: none;
}

/* Firefox can also style options */ 
option {
  background:#5d5d5d;
  border-top:1px solid #000;
  padding:.3em 1em .3em 1em;
}

Radiobuttons und Checkboxen[Bearbeiten]

Hinweis über die Eigenschaft :checked kann man die Browser identifizieren, bei denen sich die Styles beeinflussen lassen. 

/* remove standard-styles */
input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border:none;
  border-radius: 0;
  font-size: 1em;
  width: 100%
} 

/* graceful degradation for ie8 */
input[type='checkbox'],
input[type='radio'] {
  width:auto;
  float:left;
  margin-right: .75em;
  background:transparent;
  border:none;
}

input[type='checkbox']:checked,
input[type='checkbox']:not(:checked),
input[type='radio']:checked,
input[type='radio']:not(:checked) {
  background: transparent;
  position: relative;
  visibility: hidden;
  margin:0;
  padding:0;
}

input[type='checkbox'] + label,
input[type='radio'] + label {
  cursor: pointer;
}

input[type='checkbox']:checked + label::before,
input[type='checkbox']:not(:checked) + label::before,
input[type='radio']:checked + label::before,
input[type='radio']:not(:checked) + label::before {
    content:' ';
    display:inline-block;
    width: 17px;
    height:17px;
    position: relative;
    top:4px;
    border: 1px solid #bbb;
    background: white;
    margin-right: 1em;
    box-shadow: inset 0 1px 1px 0 rgba(0,0,0,.1);
}

input[type=radio]:checked + label::before,
input[type=radio]:not(:checked) + label::before {
  border-radius: 30px;
}

input[type='checkbox']:hover  + label::before,
input[type='radio']:hover  + label::before {
  background:#ddd;
  box-shadow: inset 0 0 0 2px white;
}

input[type='checkbox']:checked  + label::before,
input[type='radio']:checked  + label::before {
  background:black;
  box-shadow: inset 0 0 0 2px white;
}


Komplettes Beispiel[Bearbeiten]

Quelle: 

<!doctype html>
<!--[if lt IE 10]><html class="lt-ie10"> <![endif]-->
<!--[if gte IE 10]><!--><html><!--<![endif]-->
<head>
<meta charset="UTF-8">
<meta name=description content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Titel der Seite</title>
<style>

/* basic styling */

* {
  font-size: 1em;
  font-family: Arial, sans-serif;
  line-height: 150%;
  box-sizing:border-box;
}

form {
  max-width: 600px;
  margin:0 auto;
}

fieldset {
  padding:0;
  border:none;
  margin:1em 0 4em 0;
}

legend {
  font-size:1.2em;
  font-weight: bold;
}

.box {
	background:#eee;
	padding:1em;
}

.box div {
	clear: both; /* fix for IE8 */
}

/* Labels */

label {
  display: inline-block;
}

label{
  margin: .2em 0;
}
  
/* remove standard-styles */
input, select, textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border:none;
  border-radius: 0;
  font-size: 1em;
  width: 100%
} 

/* Input & Textarea */
input, textarea {
  background-color:white;
  border: 1px solid #bbb;
  padding:.75em 1em .5em 1em;
  box-shadow:inset 0 2px 1px 0 rgba(0,0,0,0.2);
}

textarea {
  resize:vertical;
}

input:hover,
input:active,
textarea:hover,
textarea:active {
  border:1px solid #666;
}

/* Select */
select {
  width:100%;
  border: 1px solid #bbb;
  padding:.75em 1em .5em 1em;
  box-shadow: 0 2px 1px 0 rgba(0,0,0,0.2);
  background-color:white;
  background-image:url(select-arrow.png);
  background-position: right;
  background-repeat: no-repeat;
}

select:hover {
  box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1);
}

/* Hide browser-styling in IE10 */
select::-ms-expand {
  display:none;
}

/* Hide custom-icons in lower versions of Internet Explorer (< IE10). */
.lt-ie10 select { 
    background-image: none; 
}

/* graceful degradation for ie8 */
input[type='checkbox'],
input[type='radio'] {
  width:auto;
  float:left;
  margin-right: .75em;
  background:transparent;
  border:none;
}

/* better styling only for modern browsers. To identify them, check for pseudoclass (:checked, :not(:checked)) */

/* hide standard inputs */
input[type='checkbox']:checked,
input[type='checkbox']:not(:checked),
input[type='radio']:checked,
input[type='radio']:not(:checked) {
  background: transparent;
  position: relative;
  visibility: hidden;
  margin:0;
  padding:0;
}

input[type='checkbox'] + label,
input[type='radio'] + label {
  cursor: pointer;
}

/* add custom inputs with ::before */
input[type='checkbox']:checked + label::before, 
input[type='checkbox']:not(:checked) + label::before,
input[type='radio']:checked + label::before,
input[type='radio']:not(:checked) + label::before {
    content:' ';
    display:inline-block;
    width: 17px;
    height:17px;
    position: relative;
    top:4px;
    border: 1px solid #bbb;
    background: white;
    margin-right: 1em;
    box-shadow: inset 0 1px 1px 0 rgba(0,0,0,.1);
}

input[type=radio]:checked + label::before,
input[type=radio]:not(:checked) + label::before {
  border-radius: 30px;
}

input[type='checkbox']:hover  + label::before,
input[type='radio']:hover  + label::before {
  background:#ddd;
  box-shadow: inset 0 0 0 2px white;
}
  
input[type='checkbox']:checked  + label::before,
input[type='radio']:checked  + label::before {
  background:black;
  box-shadow: inset 0 0 0 2px white;
}



</style>
</head>

<body>

<form method="post" action="#">

<fieldset>
<legend>Input</legend>
<div class="box">
<div>
<label>Eingabefeld</label>
<input type="text">
</div>
</div>
</fieldset>

<fieldset>
<legend>Select-Liste</legend>
<div class="box">
<div>
<select>
  <option selected="selected">Bitte wählen</option>
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
  <option>Option 4</option>
  <option>Option 5</option>
</select>
</div>
</div>
</fieldset>

<fieldset>
<legend>Checkboxen</legend>
<div class="box">
 <div>
 <input type="checkbox" name="checkbox-demo" id="checkbox-demo-1">
 <label for="checkbox-demo-1">Auswahl</label>
 </div>
 <div>
  <input type="checkbox" name="checkbox-demo" id="checkbox-demo-2">
 <label for="checkbox-demo-2">Auswahl</label>
 </div>
 <div>
  <input type="checkbox" name="checkbox-demo" id="checkbox-demo-3">
 <label for="checkbox-demo-3">Auswahl</label>
 </div>
 <div>
  <input type="checkbox" name="checkbox-demo" id="checkbox-demo-4">
 <label for="checkbox-demo-4">Auswahl</label>
 </div>
 </div>
</fieldset>

<fieldset>
<legend>Radio-Buttons</legend>
 <div class="box">
 <div>
 <input type="radio" name="radio-demo" id="radio-demo_ja" value="Ja" /><label for="radio-demo_ja" class="inline-label">
   Ja </label>
</div>
<div>
 <input type="radio" name="radio-demo" id="radio-demo_nein" value="Nein"  />
 <label for="radio-demo_nein" class="inline-label">
    Nein </label>
  </div>
  </div>
</fieldset>

<fieldset>
<legend>Textarea</legend>
<div class="box">
<div>
<label>Mehrzeiliges Eingabefeld</label>
<textarea></textarea>
</div>
</div>
</fieldset>

</form>

</body>
</html>
Abgerufen von „https://wiki.stephanschlegel.de/index.php?title=Formular_Stylen_mit_Support_für_IE_8_und_IE_9_(Beispiel)&oldid=22498“