CSS content generation before or after input elements

Question

In Firefox 3 and Google Chrome 8 0 the following works as expected    lt style type  text css  gt      span before   content   span        lt  style gt    lt span gt Test lt  span gt   lt  -- produces   span  Test  -- gt    But it doesn t when the element is  lt input gt     lt style type  text css  gt      input before   content   input        lt  style gt    lt input type  text  gt  lt  input gt   lt  -- produces only the textbox  the generated content                                  is nowhere to be seen in both FF3 and Chrome 8 -- gt    Why is it not working like I expected

User · Answer

Something like this works    x000D   x000D  input   label  after   x000D    content   click my input   x000D    color  black  x000D    x000D   x000D  input focus   label  after   x000D    content   not valid yet   x000D    color  red  x000D    x000D   x000D  input valid   label  after   x000D    content   looks good   x000D    color  green  x000D    x000D   lt input id  input  type  number  required   gt  x000D   lt label for  input  gt  lt  label gt  x000D   x000D   x000D    Then add some floats or positioning to order stuff

User · Answer

With  before and  after you specify which content should be inserted before  or after  the content inside of that element  input elements have no content   E g  if you write  lt input type  text  gt Test lt  input gt   which is wrong  the browser will correct this and put the text after the input element   The only thing you could do is to wrap every input element in a span or div and apply the CSS on these   See the examples in the specification      For example  the following document fragment and style sheet    lt h2 gt  Header  lt  h2 gt                h2   display  run-in     lt p gt  Text  lt  p gt                    p before   display  block  content   Some              would render in exactly the same way as the following document fragment and style sheet    lt h2 gt  Header  lt  h2 gt             h2   display  run-in     lt p gt  lt span gt Some lt  span gt  Text  lt  p gt   span   display  block      This is the same reason why it does not work for  lt br gt    lt img gt   etc    lt textarea gt  seems to be special

User · Answer

This is not due to input tags not having any content per-se  but that their content is outside the scope of CSS   input elements are a special type called replaced elements  these do not support  pseudo selectors like  before and  after      In CSS  a replaced element is an element whose representation is   outside the scope of CSS  These are kind of external objects whose   representation is independent of the CSS  Typical replaced elements   are  lt img gt    lt object gt    lt video gt  or form elements like  lt textarea gt    and  lt input gt   Some elements  like  lt audio gt  or  lt canvas gt  are replaced   elements only in specific cases  Objects inserted using the CSS   content properties are anonymous replaced elements    Note that this is even referred to in the spec      This specification does not fully define the interaction of  before   and  after with replaced elements  such as IMG in HTML     And more explicitly      Replaced elements do not have   before and   after   pseudo-elements

User · Answer

Use tags label and our method for    is bound to input  If follow the rules of the form  and avoid confusion with tags  use the following    lt style type  text css  gt      label lab before   content   input        lt  style gt    or compare  short code     lt style type  text css  gt      div label   content   input     color  red     lt  style gt    form       lt label class  lab  for  single  gt  lt  label gt  lt input name  n  id  single      gt  lt label for  single  gt  - simle lt  label gt    or compare  short code     lt div gt  lt label gt  lt  label gt  lt input name  n      gt  lt  div gt

User · Answer

fyi  lt form gt  supports  before    after as well  might be of help if you wrap your  lt input gt  element with it     got myself a design issue with that too

[html] CSS content generation before or after 'input' elements

Examples related to html

Examples related to css