Why changing visibility/display on focus does not work?

Question

I've gotten an idea to make a search "button" upon clicking which the input box would show up and stretch. However instead of using an invisible checkbox I decided to try and use the label since clicking the label would put focus on the element the label is connected to. And while giving focus and doing basic transformations do work, I can't seem to hide/show the textbox either using visibility: hidden/visible or display: none/inline-block. And I don't want to just rely on opacity since the textbox can be found/clicked even while it's hidden.

Current attempt: JsFiddle

Why doesn't this work? What am I doing wrong?

score 18 · Accepted Answer · answered Jan 25 '14 at 14:07

18

Elements that are not visible cannot receive focus, therefore the :focus psuedo-class cannot apply.

Using width and opacity seems to produce a reasonable effect.

answered Jan 25 '14 at 14:07

Niet the Dark Absol

320,036
81
464
592

I see... so it's either opacity or using the checkbox trick. Thanks for the answer – MrPlow Jan 25 '14 at 14:21

score 2 · Answer 2 · answered Jan 25 '14 at 14:15

2

you can use opacity only, visibility:hidden or display:none; are not suppose to allow focus (IMHO), since element are not visible.

form label {
    font-size: 23px;
}

#box {
    width: 0px;
  opacity:0;
    -webkit-transition: 200ms;
    -moz-transition: 200ms;
    -ms-transition: 200ms;
    -o-transition: 200ms;
    transition: 200ms;        
}

#box:focus {
   opacity:1;
    width: 50px;
}

http://jsfiddle.net/6h8cF/7/

answered Jan 25 '14 at 14:15

G-Cyrillus

101,410
14
105
129

"are not suppose to allow focus" and if I want to manipulate an *invisible* input element to use the copy event? – Gabriel Petersson Aug 30 '20 at 19:19

score 1 · Answer 3 · edited May 23 '17 at 11:53

1

You can't really get a focus from a label since it is not a focussable element. See BoltClocks answer here : Anyway to have a label respond to :focus CSS

edited May 23 '17 at 11:53

Community

1
1

answered Jan 25 '14 at 14:10

Haroldchen

199
7

score 1 · Answer 4 · answered Jan 25 '14 at 14:11

Fiddle: http://jsfiddle.net/h6NNs/

Change from :focus to :hover.

Resulting CSS should be:

form label {
    font-size: 23px;
}

#box {
    width: 0px;
    visibility: hidden;
    opacity: 0;

    -webkit-transition: 200ms;
    -moz-transition: 200ms;
    -ms-transition: 200ms;
    -o-transition: 200ms;
    transition: 200ms;        
}

#box:hover{
    visibility: visible;
    opacity: 1;    
    width: 50px;
}

Why changing visibility/display on focus does not work?

4 Answers4

Linked

Related