"Glødende" input-felter som i Safari

Det er helt sikkert i den rigtige retning, det du skrev Per.
Men jeg tror mere det er selve glow-delen, der er vigtig, så hvis du siger at dit eksempel let kan laves om til at bruge et billede, kan du så ikke lige poste et eksempel?

Det er et rent spørgsmål om CSS.

Hvis du har to baggrundsbilleder - der simpelthen viser selve, hele inputfeltet, i lige stor størrelse. Det ene billede har en glødende kant, og det andet har ikke.

Så siger du i CSS'en at dit input-felt skal have bredde og højde lig med dine billeder. Og så siger du at alle inputfelter skal have billedeUdenKant.gif som baggrundsbillede som standard. Så bruger du mit eksempel fra før således:

Kode 

<input type="text" onfocus="this.style.background=('url(billedeMedKant.gif)')" onblur="this.style.background=('url(billedeUdenKant.gif)')" />

Forholdsvis simpelt, dog lidt hackish

EDIT:
Bonus-tip: Det kommer nok til at se lidt underligt ud, uden videre. derfor kan du med fordel lege lidt frem og tilbage med padding attributten i CSS. Således at teksten står tilstrækkeligt fra kanten på baggrundsbilledet til ikke at overlappe den glødende kant.

Den går heller ikke, da baggrundsbilledet sætter sig inden i input-feltet...

Det er helt sikkert i den rigtige retning, det du skrev Per.
Men jeg tror mere det er selve glow-delen, der er vigtig, så hvis du siger at dit eksempel let kan laves om til at bruge et billede, kan du så ikke lige poste et eksempel?

Det er et rent spørgsmål om CSS.

Hvis du har to baggrundsbilleder - der simpelthen viser selve, hele inputfeltet, i lige stor størrelse. Det ene billede har en glødende kant, og det andet har ikke.

Så siger du i CSS'en at dit input-felt skal have bredde og højde lig med dine billeder. Og så siger du at alle inputfelter skal have billedeUdenKant.gif som baggrundsbillede som standard. Så bruger du mit eksempel fra før således:

Kode 

<input type="text" onfocus="this.style.background=('url(billedeMedKant.gif)')" onblur="this.style.background=('url(billedeUdenKant.gif)')" />

Forholdsvis simpelt, dog lidt hackish

EDIT:
Bonus-tip: Det kommer nok til at se lidt underligt ud, uden videre. derfor kan du med fordel lege lidt frem og tilbage med padding attributten i CSS. Således at teksten står tilstrækkeligt fra kanten på baggrundsbilledet til ikke at overlappe den glødende kant.

Den går heller ikke, da baggrundsbilledet sætter sig inden i input-feltet...

Jo, det gør det, hvis man ved hvad man laver Det er som sagt bare et spørgsmål om at trylle lidt med noget padding

Du kunne jo sagtens lave det med noget JavaScript der tester om input feltet er blevet aktiveret. Hvis den er kunne du sætte en div rundt om og give den et baggrundsbillede, som i dette eks. ville være en lysende "ring".

<input type="text" onfocus="this.style.border=('2px solid #000000')" onblur="this.style.border=('0')" />

I korte træk.

Ja, men eftersom han ville have et billede, gør det problemet meget størrere, da næsten igen browsere understøtter CSS3 som ellers understøtter "billed-borders".

Ja, men eftersom han ville have et billede, gør det problemet meget størrere, da næsten igen browsere understøtter CSS3 som ellers understøtter "billed-borders".

Der stod ingen steder, der skulle være et billede. Der stod han ville have en effekt som den i Safari. Jeg tror godt, han kan leve med, at det er en firkantet border istedet for en ring.

Ellers kan det, som du skriver, fint emuleres med et baggrundsbillede. Til hvilket formål den snippet jeg postede blot kan modificeres en smule

Det er helt sikkert i den rigtige retning, det du skrev Per.
Men jeg tror mere det er selve glow-delen, der er vigtig, så hvis du siger at dit eksempel let kan laves om til at bruge et billede, kan du så ikke lige poste et eksempel?

Det er helt sikkert i den rigtige retning, det du skrev Per.
Men jeg tror mere det er selve glow-delen, der er vigtig, så hvis du siger at dit eksempel let kan laves om til at bruge et billede, kan du så ikke lige poste et eksempel?

Det er et rent spørgsmål om CSS.

Hvis du har to baggrundsbilleder - der simpelthen viser selve, hele inputfeltet, i lige stor størrelse. Det ene billede har en glødende kant, og det andet har ikke.

Så siger du i CSS'en at dit input-felt skal have bredde og højde lig med dine billeder. Og så siger du at alle inputfelter skal have billedeUdenKant.gif som baggrundsbillede som standard. Så bruger du mit eksempel fra før således:

<input type="text" onfocus="this.style.background=('url(billedeMedKant.gif)')" onblur="this.style.background=('url(billedeUdenKant.gif)')" />

Forholdsvis simpelt, dog lidt hackish

EDIT:
Bonus-tip: Det kommer nok til at se lidt underligt ud, uden videre. derfor kan du med fordel lege lidt frem og tilbage med padding attributten i CSS. Således at teksten står tilstrækkeligt fra kanten på baggrundsbilledet til ikke at overlappe den glødende kant.

Haha, ja men det går nok

Tak for hjælpen.