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

Groups > comp.lang.javascript > #41374

Re: styling <input type=text> elements

Show all headers | View raw

On 29/07/2023 11:05, JJ wrote:
> On Fri, 28 Jul 2023 06:31:02 -0700 (PDT), luserdroog wrote:
>> 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?
> 
> Chances are that, whatever CSS you've tried to apply to the INPUT element,
> is overidden by a higher priority styles. Meaning that, you styles aren't
> defined with a CSS selector which is specific enough to have a higher
> priority than the existing one.
> 
> Content in Shadow DOM is similar (but not the same) to a separate document
> in an IFRAME. CSS rules by default, don't apply across Shadow DOM unless the
> correct CSS selector is used.

Firefox inspector is your friend here. For the record < input > does in 
fact respond to style= "width: X px".

But the problem is that until you have written as many pages as I seem 
to have the habit of turning margins paddings, and everything else to 
zero on your <body> definition leads to many strange interpretations by 
the browser itself that are different between browsers, oh, and if you 
want to preserve fonts across browser and platforms embed those, as well.

-- 
How fortunate for governments that the people they administer don't think.

Adolf Hitler

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