How to combine input:after:focus pure css?

Question

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!

Answer 1

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;
}

Answer 2

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';
    }

Answer 3

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