login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Background Image for Select (dropdown) laten werken in alle browsers :s

Offline Kosmoseistis - 12/12/2011 14:32
Avatar van KosmoseistisLid Hello dierbare lezer,

Momenteel probeer ik mijn select-box te vervangen door een background-image en dit zo goed mogelijk in alle browsers. Tot nu toe al redelijk wat gegoogeld en dit is mijn voorlopige code met zijn resultaten:

css code - Bekijk de code zonder highlighting - Klap code in 
  1. select {
  2. 	width:166px; height:26px;
  3. 	border:none;
  4. 	background-color:transparent;
  5. 	background:url(../images/zoekknop.png) no-repeat 0 0;
  6. 	display:block;
  7. 	line-height:25px;
  8. 	-webkit-appearance: none;
  9. 	padding-top:4px;
  10. 	margin-top:3px;
  11. 	margin-bottom:3px;
  12. }


Chrome: Dit geeft het beste resultaat in Chrome, niets van de oorspronkelijke weergave van deze browser blijft staan! Enkel mijn background-image is zichtbaar  

FF: In firefox zit ik met een restje van de oorspronkelijk select-form van de browser. Namelijk het kleine vierkantsblokje met het pijltje, dat de bezoeker duidleijk maakt dat er een keuzelijst verborgen zit onder de knop.

IE9&8: Zelfde probleem als in Firefox. Het kleine vierkantblokje (rechts) blijft zichtbaar.

IE7: geen background-image maar wel de klassieke weergave zonder border.

Welnu, graag had ik te afwerking ook dat kleine vierkantje met pijl nog verwijderd in FF en IE8e9.

Iemand ervaring met probleem en ook een up-to-date oplossing?

thanksInAdvance
K.

1 antwoord

Gesponsorde links
Offline Martijn - 12/12/2011 21:16
Avatar van Martijn Crew PHP background-color:transparent;
background:url(../images/zoekknop.png) no-repeat 0 0;

Daar kan een probleem in zitten. 'background' is een samenvoeging van background-color, background-image, background-repeat, en background-position. Het volgende zou kunnen werken:

css code - Bekijk de code zonder highlighting - Klap code in 
  1. background: transparant url(../images/zoekknop.png) no-repeat 0 0;
  2. /* of (hetzelfde) */
  3. background-color: transparant;
  4. background-image; url(../images/zoekknop.png);
  5. background-repeat: no-repeat;
  6. background-position: 0 0; /*al niet nodig, dit is de default */


Uit ervaring weet ik dat dit een kreng kan zijn, je kan altijd nog een span om de select heen plaatsen, en die dan opmaken Span zal altijd de grootte aannemen van de select.
Sidenote: Ik weet even niet of select een block of inline element is, mocht het toch een block zijn, moet je er een div omheen zetten, en dan die display: inline; geven. Wat meer werk, maar wel SEO =)
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.176s