Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #41375

Re: styling <input type=text> elements

Show all headers | View raw

On 29/07/2023 13:57, Dr.Kral@nyc.rr.com wrote:
> On Fri, 28 Jul 2023 06:31:02 -0700 (PDT), luserdroog
> <luser.droog@gmail.com> wrote in
> <112fa9f3-7d2d-4c3b-b417-655eb0776264n@googlegroups.com>:
> 
>> After much searching and struggling I've discovered that the
>> only way to adjust the size of an <input type=text> element is
>> with its size="number-of-chars" attribute.
>>
>> Are there any common workarounds to let me style the thing
>> to (at least appear to) fill its containing box? Can I just simulate
>> one with a web component and having it look different but
>> feed a hidden <input> element in its shadow dom?
>>
>> I suppose the answer to that last question is probably Yes.
>> Does this sound like a good idea?
> 
> 
> If you have
>       <input id='a' size='10' value='123'>
> then adjust the size with
>       document.getElementById('a').setAttribute('size', 15) ;
> 
> If you have
>      <input id='b' style="width:10em" value='123'>
> then adjust the width with
>      document.getElementById('b').style.width='25em' ;
> 
> You probably want to investigate getting width of a string and using a
> fixed width font to get things to fit.  "onchange" is useful.
> 
> You could also replace the input element with a bordered string inline
> after the value is entered.
> <span style="border:red 1px solid;">12345</span>
> 
> 
Make your <input> a nice width and allow overflow in it.
The rest of the default HTML entry should be replaced with javascripted 
buttons apart from the drop down menus which need to be utterly restyled 
to not look like something out of the 1980s. File upload is another one 
where you have to overlay the default styles.


> 
> 

-- 
Climate Change: Socialism wearing a lab coat.

Back to comp.lang.javascript | Previous | Next — Previous in thread | Next in thread | Find similar | Unroll thread

Thread

styling <input type=text> elements luserdroog <luser.droog@gmail.com> - 2023-07-28 06:31 -0700
  Re: styling <input type=text> elements Ben Bacarisse <ben.usenet@bsb.me.uk> - 2023-07-28 20:11 +0100
    Re: styling <input type=text> elements luserdroog <luser.droog@gmail.com> - 2023-07-31 06:53 -0700
      Re: styling <input type=text> elements "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2023-07-31 20:59 -0700
        Re: styling <input type=text> elements luserdroog <luser.droog@gmail.com> - 2023-08-02 07:33 -0700
    Re: styling <input type=text> elements luserdroog <luser.droog@gmail.com> - 2023-07-31 06:58 -0700
      Re: styling <input type=text> elements Ben Bacarisse <ben.usenet@bsb.me.uk> - 2023-07-31 16:49 +0100
        Re: styling <input type=text> elements luserdroog <luser.droog@gmail.com> - 2023-07-31 09:41 -0700
          Re: styling <input type=text> elements luserdroog <luser.droog@gmail.com> - 2023-07-31 09:57 -0700
  Re: styling <input type=text> elements JJ <jj4public@outlook.com> - 2023-07-29 17:05 +0700
    Re: styling <input type=text> elements The Natural Philosopher <tnp@invalid.invalid> - 2023-07-29 17:49 +0100
  Re: styling <input type=text> elements Dr.Kral@nyc.rr.com - 2023-07-29 08:57 -0400
    Re: styling <input type=text> elements The Natural Philosopher <tnp@invalid.invalid> - 2023-07-29 17:52 +0100
  Re: styling <input type=text> elements Arno Welzel <usenet@arnowelzel.de> - 2023-07-30 09:45 +0200

csiph-web