How to outline fake-input element?

Question

I have this element:

<span class="input" tabindex="1">&euro;<input type="text"></span>

With this CSS:

.input {
  background: #FFF;
  padding: 5px 10px;
}
.input input {
  border: 0;
  background: #FFF;
  padding-left: 5px;
}
.input input:focus {
  outline: none;
}
.input:focus {
  outline: 1px solid yellow;
}

My problem is that if I click on the border of the element or on the € symbol, the element is outlined, but if I click inside the input box, the element is not outlined.

There is a CSS-only way to fix this problem?

PS:

If I wanted a JS solution I would used this as I'm doing at the moment:

$(".input input").focus(
  function() {
    $(this).parent().addClass("focus");
  }).blur( function() {
    $(this).parent().removeClass("focus");
  }
);

But I'm looking for a pure-css solution.

score 0 · Accepted Answer · edited May 23 '17 at 10:25

0

As far as I know it is not possible with plain CSS. What you want is a "parent" selector, which doesn't exist in CSS2 or CSS3. According to this answer there is a possibility to define a subject in the CSS4 specs, until these are available in all (major) browsers you will have to use JavaScript.

A jQuery way to do it could look like this:

$('.input input').focus(
  function() {
    $(this).parent().css("outline", "1px solid yellow");
  }).blur(
  function() {
    $(this).parent().css("outline", "none");
  }
);

jsFiddle

edited May 23 '17 at 10:25

Community

1
1

answered Nov 15 '13 at 08:29

Gerald Schneider

16,520
9
55
76

Yes I thought that... damn parent selectors... Thanks however, will wait a bit to see if someone else has some idea to solve the problem somehow. – Fez Vrasta Nov 15 '13 at 08:31

How to outline fake-input element?

1 Answers1