13

I have an input field which requires specific gradient borders on focus. So, I've created this kind of border as background color on the block and smaller background on :after element. It works at the simple block, but doesn't work on :focus.

.test:focus:after and .test:after:focus are not working.

Is there any solution?

Here is the sample to see what am I talking about http://codepen.io/anon/pen/Ajiwk

Thank you!

laaposto
  • 11,835
  • 15
  • 54
  • 71
user3310932
  • 131
  • 1
  • 1
  • 3
  • 3
    You can't apply :focus to a pseudo element as it's not a DOM element. – Paulie_D Feb 14 '14 at 16:16
  • 1
    You can not even have `:after` on `input` elements, since those do not have content. (It might work in some browsers, but most likely not in all.) – CBroe Feb 14 '14 at 16:19
  • 1
    possible duplicate of [CSS3 :after pseudo element with input](http://stackoverflow.com/questions/4369868/css3-after-pseudo-element-with-input) – cimmanon Feb 14 '14 at 16:28
  • Well, you can assign two classes to the textarea, set focus pseudo element to one and after to other. http://codepen.io/anon/pen/AGzyB – Nix Feb 14 '14 at 16:32
  • Thank you a lot for the answers. I knew that it's not so easy. Will try all the samples written here. – user3310932 Feb 14 '14 at 17:56

3 Answers3

13

You can't do this for elements that can't have HTML content. See this example.

One way to do this is by adding an element that can have HTML content, like span, and applying the ::after pseudo-element (or in CSS 2.1, the :after pseudo-selector) to that.

An example using your code is here.

A generic example:

HTML:

<textarea>Text</textarea><span></span>

CSS

textarea + span::after{
    content:"Hello world!";
}

textarea:focus + span::after{
    content:"Goodbye, world!";
}

↪ See this example on JSFiddle

↪ More information about the + selector in CSS

user2428118
  • 7,935
  • 4
  • 45
  • 72
  • 2
    Cool hack, but I wonder if there is a way to get at the focused element's attributes. I was trying to do `input:focus::after { content: attr(placeholder) }`. – Max Starkenburg May 15 '18 at 14:48
  • @Max I don't think there's a way to do that. `attr` specifically gets the attributes of the element the selector applies to, or in case of pseudo-elements like `::after` the pseudo-element's originating element. – user2428118 May 18 '18 at 12:48
9

I realize this is old, but I found this question when looking for my own and the solution listed didn't work for me, though it did put me on track for what did work.

The solution I used is similar, but a bit different.

HTML

<span class="after-holder"><input type="text" class="edit long" /></span>

CSS

.after-holder:focus-within::after {
        content: 'content';
    }
Bel
  • 186
  • 1
  • 5
  • Good solution but be aware, not fully supported, although pretty decent if you don't need Edge/IE. Works for me though! https://caniuse.com/#search=focus-within – zdixon Nov 28 '19 at 01:11
2

It worked for me when focus is present in input field.

.date-of-birth:focus-within::after {
  position: absolute;
  color: #b5d0ee;
  font-weight: 600;
  left: 40%;
  top: 14px;
  content: attr(placeholder);
  pointer-events: none;
  opacity: 0.5;
  z-index: 1;
}
JPawelHeaven
  • 31
  • 1