SELECT-Element unter einer Ebene (DIV) verbergen
HTML

Problembeschreibung

Wird über das SELECT-Element einfach eine Ebene (DIV) gelegt, so wird das Feld vom IE dennoch angezeigt. Abhilfe schafft das Einfügen eines iFrames zwischen SELECT und dem DIV.

  1. Formular mit SELECT-Element
  2. Absolut positionierter iFrame
  3. Ebene (DIV) mit gewünschter Hintergrundfarbe

Beispiel - SELECT-Element verbergen

 

Quellcode zum Beispiel

Der folgende Quellcode zeigt ein komplettes HTML-Dokument, welches oben beschriebene Vorgehensweise umsetzt.

HTML:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>www.tutorials.de</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<style type="text/css">
  <!--
.frmLayer,
#divID{ position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        width: 494px;
        height: 46px;
        display: none;}
.frmLayer{ z-index: 99;}
#divID{ background: #efefef;
        z-index: 100;}
 //-->
</style>
<script type="text/JavaScript">
<!--
  function hideForm(){
    objHide = document.getElementById("frmID").style;
    objHide.display = (objHide.display=="block")?"none":"block";
    objHide = document.getElementById("divID").style;
    objHide.display = (objHide.display=="block")?"none":"block";
  }
//-->
</script>
</head>

<body>
<button onclick="hideForm();">hide</button>
<div style="position: relative; margin: 12px; border: 3px double #ccc; width: 500px;">
  <form style="padding: 12px;">
    <div>
      <select name="selTest">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
      </select>
    </div>
  </form>
  <iframe id="frmID" src="" frameborder="0" class="frmLayer"></iframe>
  <div id="divID">&nbsp;</div>
</div>
</body>
</html>
© 2006 Quaese