Rainer: Select mit CSS formatieren

SELF-Forum

Select mit CSS formatieren

Rainer
– Informationen zu den Bewertungsregeln

Hallo,

kann man bei einem <select> mit CSS den border "ausschalten"?

Gruß Rainer

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Select mit CSS formatieren

    Mathias Brodala Homepage des Autors
    +1 Informationen zu den Bewertungsregeln

    Hallo Rainer.

    kann man bei einem <select> mit CSS den border "ausschalten"?

    Wenn der jeweilige Client dies zulässt, dann ja.

    Im Allgemeinen lassen sich Formularelemente jedoch nur eingeschränkt formatieren, weshalb es im Endeffekt günstiger ist, gleich ganz darauf zu verzichten. Dies bringt auch den Vorzug mit sich, dass Formularelemente in vertrauter Optik erscheinen, was die Bedienbarkeit von Formularen verbessert. (YMMV)

    Einen schönen Mittwoch noch.

    Gruß, Mathias

    --
    ie:% fl:| br:< va:) ls:& fo:) rl:( n4:~ ss:) de:] js:| mo:| zu:)
    debian/rules
    Beitrag melden
    +1
    Informationen zu den Bewertungsregeln

    1. Select mit CSS formatieren

      Rainer
      – Informationen zu den Bewertungsregeln

      Hallo Matthias,

      also wie üblich. Firefox kann es, der IE natürlich nicht.
      Getestet und für "Murks" befunden ;-)

      Gruß Rainer

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

  2. Selectbox ohne Border

    Gernot Back Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hallo Rainer,

    kann man bei einem <select> mit CSS den border "ausschalten"?

    der IE sträubt sich da etwas, border:none reicht da nicht. Aber wenn man das Select-Element in ein anderes Element packt, dem ich hier die Klasse "clipper" gegeben habe, geht es auch in Firefox 1.5 und 2 sowie Opera 9, im IE nur bei eingeschaltetem JavaScript, in Netscape 7.1 aber leider gar nicht:

      
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  
        "http://www.w3.org/TR/html4/strict.dtd">  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
<title>Dropdown ohne Umrandung</title>  
<style type="text/css">  
[code lang=css]  
.clipper {  
   overflow:hidden;  
   float:left;  
}  
  
.clipper select {  
   font-size:1em;  
   border:none;  
}

    </style>
    <!--[if IE]>
    <style type="text/css">
    .clipper select {
       margin:-2px;
       width:expression(parentNode.offsetWidth +4);
    }
    </style>
    <![endif]-->
    </head>
    <body >
       <form name="myForm" action="#" method="post">
          <span class="clipper">
             <select name="mySelect">
                <option>erste Wahl</option>
                <option>zweite Wahl</option>
             </select>
          </span>
       </form>
    </body>
    </html>
    [/code]
    Gruß Gernot

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln