[css] input field disabled="yes" overruled css? - Softwareontwikkeling

woensdag 12 december 2001 21:07

Acties:

Topicstarter

heb dus een inputveldje die disabled is:

code:

1	<input type="text" name="inhoudsmaat1" size="10" class="eenheid" disabled="yes">

De tekst krijgt dan normaal gesproken zo'n grijze kleur. Ik wil echter graag dat ie donkerrood is (#660000) en heb dit in een css'je gezet (class="eenheid"). Maarrrr, dit werkt niet? Iemand een tip?

ps.IE only speelt geen rol, intern gebruik namelijk...

woensdag 12 december 2001 21:08

Acties:

DeFeCt

je wéét toch

alleen disabled is voldoende en ik zie nog geen value dus wat moet er donkerrood worden? De background?

Flickr

woensdag 12 december 2001 21:13

Acties:

huistra

Topicstarter

Op woensdag 12 december 2001 21:08 schreef DeFeCt het volgende:
alleen disabled is voldoende en ik zie nog geen value dus wat moet er donkerrood worden? De background?

Nee, klopt. De tekst wordt er later ingeschreven mbv een javascriptje. En die tekst moet donkerrood worden.

woensdag 12 december 2001 21:45

Acties:

r0bert

code:

1	<input type="text" name="inhoudsmaat1" size="10" class="eenheid" disabled="yes" style="color: #660000;">

? lijkt me logisch

woensdag 12 december 2001 21:51

Acties:

huistra

Topicstarter

Op woensdag 12 december 2001 21:45 schreef r0bert het volgende:
code:
1
<input type="text" name="inhoudsmaat1" size="10" class="eenheid" disabled="yes" style="color: #660000;">
? lijkt me logisch

nee, de letters blijven dat grijze kleurtje houden, probeer maar es...

woensdag 12 december 2001 23:57

Acties:

BtM909

Watch out Guys...

Klopt, eigenschap van readonly velden is dat de text grijs wordt (in IE dan). Check volgend script maar, dan zie je het vanzelf:

code:

<html>
<head>
<script language="javascript">
  function t(){
   document.a.veld1.disabled = true;
  }
</script>
</head>

<body>
<form name="a">
  <input type="text" name="veld1" size="20" style="color: #FF0000" value="testikel">
  <input type="button" value="Read only" onclick='t();'>
</form>
</body>
</html>

Wat ik weleens doe, voor dit soort situaties is:

code:

1	<input type="text" name="veld1" onClick='veld1.blur()' size="20" style="color: #FF0000" value="testikel">

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

donderdag 13 december 2001 00:50

Acties:

RM-rf

1 2 3 4 5 7 6 8 9

Op woensdag 12 december 2001 21:51 schreef huistra het volgende:

------------------------------------------------------------------------
<input type="text" name="inhoudsmaat1" size="10" class="eenheid" disabled="yes" style="color: #660000;">
------------------------------------------------------------------------
? lijkt me logisch
------------------------------------------------------------------------

nee, de letters blijven dat grijze kleurtje houden, probeer maar es...

met die code kan je het niet checken lijkt me, immers in een disabled veld kan je helemaal geen text typen.

heb het hier met

code:

1	<input type="text" name="inhoudsmaat1" size="25" value="test" class="eenheid" disabled="yes" style="color: #660000;">

geprobeerd in mac/msie5 (die heeft wel een betere CSS1 ondersteuning dan msie/PC)
en hij doet het gedeeltelijk, het font wordt wel in rood gerenderd echter de kleur lijkt heel lelijk te worden 'afgezwakt' door de disabled, alsof het een alpha-filter krijgt, maar dan lelijker, een soort flets rood-grijs.

ik denk dat disabled gewoon ook de mogelijkheden om de style aan te passen beperkt, helaas en het lijkt me niet wenselijk, het is de designers verantwoordelijkheid hier bewust mee om te gaan, een disabled veld niet visueel duidelijk disabled maken is dom en werkt ergernis bij de gebruiker, maar dat is juist een gewoonte die nog een beetje scheiding aanbrengt tussen gekwalificeerde vormgevers en de prutsers.

CSS2 zou nu juist een hele leuke optie bieden om in de styledefinitie, dit eenvoudig aan te geven:

code:

1
2
3

INPUT[disabled="true"] {
  color: rgb(255, 0, 0)
}

Intelligente mensen zoeken in tijden van crisis naar oplossingen, Idioten zoeken dan schuldigen

donderdag 13 december 2001 07:18

Acties:

Dennis

Op woensdag 12 december 2001 21:08 schreef DeFeCt het volgende:
alleen disabled is voldoende

Nope, volgens xhtml specificaties niet

Overigens is meestal

code:

1	disabled="disabled"

De standaard

Op donderdag 13 december 2001 00:50 schreef RM-rf het volgende:
CSS2 zou nu juist een hele leuke optie bieden om in de styledefinitie, dit eenvoudig aan te geven:
code:
1
2
3
INPUT[disabled="true"] {
  color: rgb(255, 0, 0)
}

Ja, en werkt dit ook?

donderdag 13 december 2001 08:15

Acties:

crisp

Devver

Pixelated

Misschien zou je een layer over het inputveld kunnen leggen zodat hij niet geselecteerd kan worden, en selectie door tab afvangen.

Intentionally left blank

donderdag 13 december 2001 14:34

Acties:

Dennis

Op donderdag 13 december 2001 08:15 schreef crisp het volgende:
Misschien zou je een layer over het inputveld kunnen leggen zodat hij niet geselecteerd kan worden, en selectie door tab afvangen.

Ehm hoe wil je bepalen waar dat tekstveld staat

donderdag 13 december 2001 18:41

Acties:

BtM909

Watch out Guys...

<input type="text" name="veld1" onClick='veld1.blur()' size="20" style="color: #FF0000" value="testikel">

Dit is toch ook een optie???? Of maak ik een denk-fout?

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

donderdag 13 december 2001 18:57

Acties:

r0bert

Op donderdag 13 december 2001 18:41 schreef BtM909 het volgende:
<input type="text" name="veld1" onClick='veld1.blur()' size="20" style="color: #FF0000" value="testikel">

Dit is toch ook een optie???? Of maak ik een denk-fout?

Als je heel snel klikt en dan een toets indrukt verschijnt deze nog gewoon in het veld.

Dit lijkt me dan een betere oplossing, ook al is 't dan bijna 'tzelfde:

code:

1	<input type="text" name="veld1" onKeyDown='veld1.blur()' size="20" style="color: #FF0000" value="testikel">

donderdag 13 december 2001 19:05

Acties:

crisp

Devver

Pixelated

Op donderdag 13 december 2001 14:34 schreef dennisdotcom het volgende:

[..]

Ehm hoe wil je bepalen waar dat tekstveld staat

Je hebt nog zoiets als style="position: relative" ...
anders zooitje in een tabel zetten met vaste hoogtes/breedtes. --> dit heb net ik dus geprobeerd, maar werkt ook maar ten dele.
Waarom maak je de input niet gewoon readonly; dan werkt de style nog wel en kan je 'm ook niet wijzigen. Als je 'm echt disabled wil hebben (omdat de inhoud niet na submit meegestuurd moet worden) kan je dat altijd nog op het laatste moment met een script doen.

Intentionally left blank