Can I use a before or after pseudo-element on an input field

Question

I am trying to use the  after CSS pseudo-element on an input field  but it does not work  If I use it with a span  it works OK     lt style type  text css  gt   mystyle after  content url smiley gif     mystyle  color red    lt  style gt    This works  puts the smiley after  buu   and before  some more     lt span class  mystyle  gt buuu  lt  span gt a some more   This does not work - it only colors someValue in red  but there is no smiley    lt input class  mystyle  type  text  value  someValue  gt    What am I doing wrong  should I use another pseudo-selector   Note  I cannot add a span around my input  because it is being generated by a third-party control

User · Answer

You have to have some kind of wrapper around the input to use a before or after pseudo-element. Here's a fiddle that has a before on the wrapper div of an input and then places the before inside the input - or at least it looks like it. Obviously, this is a work around but effective in a pinch and lends itself to being responsive. You can easily make this an after if you need to put some other content.

Working Fiddle

Dollar sign inside an input as a pseudo-element: http://jsfiddle.net/kapunahele/ose4r8uj/1/

The HTML:

<div class="test">
    <input type="text"></input>
</div>

The CSS:

input {
    margin: 3em;
    padding-left: 2em;
    padding-top: 1em;
    padding-bottom: 1em;
    width:20%; 
}


.test {
    position: relative;
    background-color: #dedede;
    display: inline;
}

.test:before {
    content: '$';
    position: absolute;
    top: 0;
    left: 40px;
    z-index: 1;
}

User · Answer

after and  before are not supported in Internet Explorer 7 and under  on any elements   It s also not meant to be used on replaced elements such as form elements  inputs  and image elements   In other words it s impossible with pure CSS   However if using jquery you can use      mystyle   after  add your smiley here      API docs on  after  To append your content with javascript  This will work across all browsers

User · Answer

before and  after only works for nodes that can have child nodes since they insert a new node as the first or last node

User · Answer

I found that you can do it like this    x000D   x000D   submit  btn input x000D    x000D     padding 11px 28px 12px 14px  x000D     background  004990  x000D     border none  x000D      color  fff  x000D    x000D   x000D    submit  btn x000D     x000D       border none  x000D       color  fff  x000D       font-family   Open Sans   sans-serif  x000D       font-size 1em  x000D       min-width 96px  x000D       display inline-block  x000D       position relative  x000D     x000D   x000D   submit  btn after x000D    x000D      content   gt    x000D      width 6px  x000D      height 17px  x000D      position absolute  x000D      right 36px  x000D      color  fff  x000D      top 7px  x000D    x000D   lt div class  submit  gt  x000D     lt div class  btn  gt  x000D        lt input value  Send  type  submit    gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    You need to have a div parent that takes the padding and the  after  The first parent needs to be relative and the second div should be absolute so you can set the position of the after

User · Answer

Summary  It does not work with  lt input type  button  gt   but it works fine with  lt input type  checkbox  gt    Fiddle  http   jsfiddle net gb2wY 50   HTML    lt p class  submit  gt       lt input id  submit-button  type  submit  value  Post  gt       lt br gt  lt br gt       lt input id  submit-cb  type  checkbox  checked gt   lt  p gt    CSS    submit-button  before   submit-cb  before       content           background  transparent      border  3px solid crimson      display  inline-block      width  100       height  100       padding  0      margin  -3px -3px

User · Answer

try next    x000D   x000D  label for  userName     x000D    position  relative  x000D    x000D   x000D  label for  userName    after   x000D    content    after    x000D    width  22px  x000D    height  22px  x000D    display  inline-block  x000D    position  absolute  x000D    right  -30px  x000D    x000D   lt label for  userName  gt  x000D   Name   x000D    lt input type  text  name  userName  id  userName  gt  x000D    lt  label gt  x000D   x000D   x000D

User · Answer

According to a note in the CSS 2 1 spec  the specification    does not fully define the interaction of  before and  after with replaced elements  such as IMG in HTML   This will be defined in more detail in a future specification     Although input is not really a replaced element any more  the basic situation has not changed  the effect of  before and  after on it in unspecified and generally has no effect   The solution is to find a different approach to the problem you are trying to address this way  Putting generated content into a text input control would be very misleading  to the user  it would appear to be part of the initial value in the control  but it cannot be modified     so it would appear to be something forced at the start of the control  but yet it would not be submitted as part of form data

User · Answer

A working solution in pure CSS   The trick is to suppose there s a dom element after the text-field    x000D   x000D     x000D     The trick is here  x000D     this selector says  take the first dom element after x000D     the input text     and set its before content to the x000D     value   before   x000D      x000D  input myTextField     before   x000D    content      x000D     x000D   lt input id  myTextField  class  mystyle  type  text  value  someValue    gt  x000D   lt  -- x000D    There s maybe something after a input-text x000D    Does nt matter what it is      I use it  x000D    -- gt  x000D   lt span gt  lt  span gt  x000D   x000D   x000D        Limited solution  though     you have to hope that there s a following dom element  you have to hope no other input field follows your input field    But in most cases  we know our code so this solution seems efficient and 100  CSS and 0  jQuery

User · Answer

before and  after render inside a container  and  lt input gt  can not contain other elements     Pseudo-elements can only be defined  or better said are only supported  on container elements  Because the way they are rendered is within the container itself as a child element  input can not contain other elements hence they re not supported  A button on the other hand that s also a form element supports them  because it s a container of other sub-elements   If you ask me  if some browser does display these two pseudo-elements on non-container elements  it s a bug and a non-standard conformance  Specification directly talks about element content     W3C specification  If we carefully read the specification it actually says that they are inserted inside a containing element      Authors specify the style and location of generated content with the  before and  after pseudo-elements  As their names indicate  the  before and  after pseudo-elements specify the location of content before and after an element s document tree content  The  content  property  in conjunction with these pseudo-elements  specifies what is inserted    See  an element s document tree content  As I understand it this means within a container

User · Answer

As others explained  inputs are kinda-replaced void elements  so most browsers won t allow you to generate   before nor   after pseudo-elements in them   However  the CSS Working Group is considering explicitly allowing   before and   after in case the input has appearance  none   From https   lists w3 org Archives Public www-style 2016Mar 0190 html      Safari and Chrome both allow pseudo-elements on their form inputs    Other browsers don t   We looked into removing this  but the   use-counter is recording   07  of pages using it  which is 20x our max   removal threshold       Actually specifying pseudo-elements on inputs would require specifying   the internal structure of inputs at least somewhat  which we haven t   managed to do yet  and I m not confident we  can  do    But Boris   suggested  in one of the bugthreads  allowing it on appearance none   inputs - basically just turning them into  lt div gt s  rather than    kinda-replaced  elements

User · Answer

I found this post as I was having the same issue  this was the solution that worked for me  As opposed to replacing the input s value just remove it and absolutely position a span behind it that is the same size  the span can have a  before pseudo class applied to it with the icon font of your choice    lt style type  text css  gt   form  position  relative     mystyle before  content url smiley gif   width  30px  height  30px  position  absolute     mystyle  color red  width  30px  height  30px  z-index  1  position  absolute     lt  style gt    lt form gt   lt input class  mystyle  type  text  value    gt  lt span class  mystyle  gt  lt  span gt   lt  form gt

User · Answer

Oddly  it works with some types of input   At least in Chrome     lt input type  checkbox    gt    works fine  same as   lt input type  radio    gt    It s just type text and some others that don t work

User · Answer

If you are trying to style an input element with  before and  after  odds are you are trying to mimic the effects of other span  div  or even a elements in your CSS stack   As Robert Koritnik s answer points out   before and  after can only be applied to container elements and input elements are not containers   HOWEVER  HTML 5 introduced the button element which is a container and behaves like an input type  submit reset   element        lt style gt       happy after   content url smiley gif          lt  style gt        lt form gt       lt  -- won t work -- gt       lt input class  happy  type  submit  value  Submit    gt        lt  -- works -- gt       lt button class  happy  gt Submit lt  button gt       lt  form gt

User · Answer

The biggest misunderstanding here is the meaning of the words before and after  They do not refer to the element itself  but to the content in the element  So element before is before the content  and element after is after the content  but both are still inside the original element   The input element has no content in the CSS view  and so has no  before or  after pseudo content  This is true of many other void or replaced elements   There is no pseudo element referring to outside the element   In a different universe  these pseudo elements might have been called something else to make this distinction clearer  And someone might even have proposed a pseudo element which is genuinely outside the element  So far  this is not the case in this universe

User · Answer

Pseudo elements like  after   before are only for container elements  Elements starting and closing in a single place like  lt input  gt    lt img gt  etc are not container elements and hence pseudo elements are not supported  Once you apply a pseudo element to container element like  lt div gt  and if you inspect the code see the image  you can understand what I mean  Actually the pseudo element is created inside the container element  This is not possible in case of  lt input gt  or  lt img gt

User · Answer

before and  after are applied inside a container  which means you can use it for elements with an end tag       It doesn t apply for self-closing elements    On a side note  elements which are self-closing  such as img hr input  are also known as  Replaced Elements   as they are replaced with their respective content   External Objects  for the lack of a better term  A better read here

User · Answer

I used the background-image to create the red dot for required fields   input type  text   required      background-image  radial-gradient red 15   transparent 16      background-size  1em 1em    background-position  top right    background-repeat  no-repeat     View on Codepen

User · Answer

Here s another approach  assuming you have control of the HTML   add an empty  lt span gt  lt  span gt  right after the input  and target that in CSS using input mystyle   span after    x000D   x000D   field with errors   x000D    display  inline  x000D    color  red  x000D    x000D   field with errors input span after   x000D    content      x000D    x000D   lt div class  field with errors  gt Label  lt  div gt  x000D   lt div class  field with errors  gt  x000D     lt input type  text    gt  lt span gt  lt  span gt   x000D   lt  div gt  x000D   x000D   x000D    I m using this approach in AngularJS because it will add  ng-invalid classes automatically to  lt input gt  form elements  and to the form  but not to the  lt label gt

User · Answer

You can t put a pseudo element in an input element  but can put in shadow element  like a placeholder   input type  text           amp   -webkit-input-placeholder        amp  before            your code               To make it work in other browsers  use  -moz-placeholder    -moz-placeholder and  -ms-input-placeholder in different selectors  Can t group the selectors  because if a browser doesn t recognize the selector invalidates the entire statement   UPDATE  The above code works only with CSS pre-processor  SASS  LESS      without pre-processors use   input type  text    -webkit-input-placeholder before      your code

[html] Can I use a :before or :after pseudo-element on an input field?

Examples related to html

Examples related to css

Examples related to pseudo-element

Examples related to css-content