How to focus on HTML input with CSS?

Question

I have the following HTML structure:

<span id="span_pagination_text_input">
     <input type="text" class="form-control" id="pagination_text_input" name="pagination_text_input"/>
     ...
</span>

And Following CSS:

span#span_pagination_text_input{
    position:relative;
}

span#span_pagination_text_input > input#pagination_text_input{
    left: -11px;
    position: absolute;
    top: -35px;
    width: 57px;
    z-index: 10;
    display:none;
    text-align:center
}
span#span_pagination_text_input:hover > input#pagination_text_input{
    display:block;
}

At this time when visitors hover on my span, I will show the input field which is hidden by default.

How I can focus on input children of span when I show that with CSS?

I know about jQuery but at this time I am looking for a CSS solution.

you can use css like input:focus { background-color: yellow; } — Pardeep Pathania
– Pardeep Pathania, Commented Jun 1, 2016 at 12:10
or use css-tricks.com/snippets/css/glowing-blue-input-highlights — Pardeep Pathania
– Pardeep Pathania, Commented Jun 1, 2016 at 12:10

dippas · Accepted Answer · 2016-06-01 12:12:28Z

1

You can achieve that by using tabindex which HTML5 allows in all elements now along with the :focus, to fake the display:none use border:0

input {
  border: 0;
  width: 57px;
  z-index: 10;
  text-align: center
}
span:focus input {
  border: 5px solid red;
  transition: border .1s
}
input:focus {
  border: 5px solid green;
}

<span tabindex="1" id="span_pagination_text_input">
  Click me
  <input type="text" class="form-control" id="pagination_text_input" name="pagination_text_input" />
</span>

edited Jun 1, 2016 at 12:12

answered Jun 1, 2016 at 12:06

dippas

60.8k15 gold badges125 silver badges134 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Manav · Accepted Answer · 2016-06-01 11:42:46Z

0

I don't think that it is possible with only css. You can try javascript

document.getElementById("IdOfInput").focus();

:-)

answered Jun 1, 2016 at 11:42

Manav

1,36710 silver badges17 bronze badges

2 Comments

Majid Abbasi Over a year ago

I am looking for a solution which does not use from jQuery and Javascript

Manav Over a year ago

Then i don't think css is the solution

Collectives™ on Stack Overflow

How to focus on HTML input with CSS?

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related