[CSS] Uitvullen input-element

[akaIDIOT]

'Lo,

Net als ik neem aan vrijwel iedereen die wel een web devt gebruik ik geregeld inputelementen om een pagina van invoermogelijkheden te verzien. Wat het stylen van deze elemente betreft loop ik echter steeds tegen een nare eigenschap van deze objecten aan.

Het gebeurt mij wel eens dat een bepaald invoerelement het mooist zou zijn als deze uitgevuld over de beschikbare breedte zou staan. Daar zit echter het nare: dat willen ze niet. Een paar ideeen:

Cascading Stylesheet:

1: 
input {
  width: 100%;
}

2:
input {
  display: block;
}

Helaas werkt geen van deze oplossingen, gezien er met een breedte van 100% geen ruimte overblijft voor borders en margins/paddings, gezien het boxmodel. Firefox schijnt een boxmodel hack in css te hebben, maar dat is natuurlijk sowieso niet helemaal de bedoeling. Oplossing nr. 2 werkt niet omdat een inputelement blijkbaar niet doet aan een 'display'...

De enige oplossing die voor mij goed werkt is de volgende:

HTML:

<div class="wrapper">
  <input type="text" class="fill" name="some-input" />
</div>

Cascading Stylesheet:

.wrapper {
  padding: 1px 2px;
  border: 1px #000 solid;
}
input.fill {
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
}

Op deze manier haal je het probleem weg bij het input element, en lijkt het net alsof het inputelement zelf een border heeft en netjes block-wise scaled...

Dan mij vraag: zijn er mensen die hier andere / betere / elegantere oplossing voor hebben gevonden en wat is jullie ervaring hiermee.

[ Voor 3% gewijzigd door akaIDIOT op 05-07-2007 17:39 ]

[SchizoDuckie]

Mijn ervaring is dat input elementen niet netjes te stylen zijn

Plus, elke browser geeft input elementen op z'n eigen manier weer.
Ik zou er niet te veel tijd in steken dus als ik jou was.

[Verwijderd]

ik heb onlangs nog input elementen zitten stylen, en dit was de css, ik geeft gewoon een absolute width mee voor de breedte.

code:

input.textinputs {
background-color:#F0F8FD;
border-color:-moz-use-text-color -moz-use-text-color #83B3D4;
border-style:none none solid;
border-width:0px 0px 1px;
color:#458EBF;
font-size:11px;
height:18px;
margin-bottom:5px;
padding:4px 5px 0px;
width:220px;
}

[RobIII]

Verwijderd schreef op dinsdag 03 juli 2007 @ 19:37:

Cascading Stylesheet:

border-color:-moz-use-text-color -moz-use-text-color #83B3D4;

Wat is dit voor een raar iets

[sopsop]

RobIII schreef op dinsdag 03 juli 2007 @ 23:01:
[...]

Wat is dit voor een raar iets

De border wordt dan dezelfde kleur als de tekstkleur. Niet echt een elegante manier en niet echt css-standaard dacht ik.

[akaIDIOT]

SchizoDuckie schreef op dinsdag 03 juli 2007 @ 17:03:
Mijn ervaring is dat input elementen niet netjes te stylen zijn

Volgens mij is dat dus best mogelijk, als je er maar wat moeite in steekt. En jammer dat deze elementen er sowieso anders uitzien in andere browsers...

Verwijderd schreef op dinsdag 03 juli 2007 @ 19:37:
ik heb onlangs nog input elementen zitten stylen, en dit was de css, ik geeft gewoon een absolute width mee voor de breedte.

code:

input.textinputs {
background-color:#F0F8FD;
border-color:-moz-use-text-color -moz-use-text-color #83B3D4;
border-style:none none solid;
border-width:0px 0px 1px;
color:#458EBF;
font-size:11px;
height:18px;
margin-bottom:5px;
padding:4px 5px 0px;
width:220px;
}

Mja, dit ziet er natuurlijk wel netjes uit, maar lost het probleem niet op, het lijkt me nou juist zo mooi dat het netjes mee scaled met de breedte van je viewport (of parent).

[Verwijderd]

zou je de width aan kunnen passen dmv een javascript die de juiste width kan berekenen?

[Blaise]

Dan mij vraag: zijn er mensen die hier andere / betere / elegantere oplossing voor hebben gevonden en wat is jullie ervaring hiermee.

Ik vind dat al een vrij elegante oplossing.

Volgens mij is dat dus best mogelijk, als je er maar wat moeite in steekt. En jammer dat deze elementen er sowieso anders uitzien in andere browsers...

Input elementen stijlen geeft zoveel gezeik dat ik er zelf vaak van afzie. Je hebt niet alleen te maken met grafische verschillen tussen alle verschillende browsers, maar ook nog tussen de OS's en soms zelfs browserskins.

Met jouw oplossing omzeil je dat probleem, maar heb je dus wel een parent element nodig om de border aan toe te kennen. Als het niet helemaal pixel-perfect hoeft kan het ook zonder parent met een inputbreedte van iets onder de 100%.

[akaIDIOT]

Verwijderd schreef op woensdag 04 juli 2007 @ 19:04:
zou je de width aan kunnen passen dmv een javascript die de juiste width kan berekenen?

Meh, lijkt me ook niet echt een mooie oplossing... Dan gooi ik er liever een wrapper omheen.
Ik ben (helaas?) zo iemand die javascript pas gebruikt als er geen andere opties zijn, wat in mijn ogen ook de beste manier is, gezien javascript zo vaak enkel irritatie bij gebruikers opwekt...