how to allow a hidden button to be shown when focused using CSS only?

Question

I have a container div and it has a hidden button inside it and it appears only when focusing on the container div. I want to make the button visible when focused (I want to make it focusable). Here's a fiddle

HTML:

<div class="ads" tabindex="0">
  <button class="close" tabindex="0">X</button>
</div>

CSS:

.ads{
    position: relative;
    display: inline-block;
    border-radius: 0.5625rem;
    border-style: solid;
    border-width: 0.03125rem;
    border-color:  lightgrey;
    background-color:  #ffffff; 
    width: 100%;
    height: 80px;
}
.close{
      display: none; 
      padding: 0; 
      background: transparent;
      border: none; 
      margin-top: 0.5rem; 
      margin-right: 0.5rem; 
      float: right; 
      width: 0.5rem;
      height: 0.5rem;
      background-image: url('delete.png'); 
      background-size: 100% 100%;
}
div.ads:focus{
    background-color:  #ebeded;
}
div.ads:focus .close{
  display:inline-block;
}
button.close:focus{
  display:inline-block;
}

How can I achieve that?

Thank you.

@Roko C. Buljan yes to make the event :focus on it with the tab key — user6561572, Aug 12 '17 at 18:27
it's working actually. look [here](https://jsfiddle.net/6m51xdtb/3/) I changed the background on focus so you can see (i'm using chrome) — avrahamcool, Aug 12 '17 at 18:30
@avrahamcool it focuses only the container div ,but I want to focus also after that the button itself — user6561572, Aug 12 '17 at 18:32
@user6561572 don't forget that as some point TAB key fill start focusing other element in the browser... — Roko C. Buljan, Aug 12 '17 at 18:36
@Roko C. Buljan you are right ,but why don't I see the button focused? it has the tabindex="0" so it should be — user6561572, Aug 12 '17 at 18:39
Can you explain why you need `tabindex` on that DIV in the first place? — Roko C. Buljan, Aug 12 '17 at 18:40

c-smile · Answer 1 · 2017-08-12T20:12:16.903

0

At any given moment of time only one element can be in focus or none.

But your solution assumes that there are two elements matching :focus in the document at the same time.

Here is sequence of events when you press TAB on focused div:

Your div looses focus so is does not match :focus;
Button gets hidden as it has not got focus yet;
as nothing visible/focusable inside the div focus moves to something else but not to the button.

You should find other solution.

Update: possible CSS only hack is to use opacity:0 instead of display:none. Hack here is that opacity:0 element is considered as still displayed element so focusable.

input{
  display: block;
  width: 100%;
}
.ads{
    position: relative;
    display: inline-block;
    border-radius: 0.5625rem;
    border-style: solid;
    border-width: 0.03125rem;
    border-color:  lightgrey;
    background-color:  #ffffff; 
    width: 100%;
    height: 80px;
}

.close{
      opacity: 0; 
      padding: 0; 
      background: transparent;
      border: none; 
      margin-top: 0.5rem; 
      margin-right: 0.5rem; 
      float: right; 
      width: 0.5rem;
      height: 0.5rem;
      background-image: url('delete.png'); 
      background-size: 100% 100%;
}

div.ads:focus{
    background-color:  #ebeded;
}
div.ads:focus .close{
  opacity: 1.0;
}
button.close:focus{
  opacity: 1.0;
}

<input type="text" placeholder="press on me and tab two times">
<div class="ads" tabindex="0">
  <button class="close" tabindex="0">X</button>
</div>
<p>
 by the second tab you should see focused button ,but you don't
</p>

edited Aug 12 '17 at 20:12

answered Aug 12 '17 at 18:43

c-smile

26,734
7
59
86

but when I :focus on the button I make it visible by display:inline-block isn't that enough? I think I am messing something between – user6561572 Aug 12 '17 at 18:46
1

At #1 your div has no :focus and button has no :focus yet. So it is invisible/not-focusable – c-smile Aug 12 '17 at 18:52
Nice step-by-step explanation. – Roko C. Buljan Aug 12 '17 at 18:52
thank you for explaining further, I understood the problem. So is there some other way to do that only in css? – user6561572 Aug 12 '17 at 18:56
@user6561572 "do that only in css" - I don't think you can do that in CSS. Script in needed. – c-smile Aug 12 '17 at 19:03
okay.. can you guide me please how to do it by JS? by an answer or articles to read .. – user6561572 Aug 12 '17 at 19:06
@user6561572 I still think you completely misunderstood the requirement. If JS was meant to be used than it should've been stated by such "requirement"... – Roko C. Buljan Aug 12 '17 at 19:07
@Roko C. Buljan I also thought that at the first place but actually the requirement says clearly that both the container div and the button must be 'focus-able' with the tab key – user6561572 Aug 12 '17 at 19:10
@user6561572 I've updated my answer with "CSS only" hack – c-smile Aug 12 '17 at 20:13
@user than, if clearly you have room for improvements and addons - simply put the button in a parent div - abdplute positionet to top right. So actually ypur focusable DIV and BUTTON will become siblings. – Roko C. Buljan Aug 12 '17 at 21:47
1

don't use opacity 0 to "hide" actual action elements or youll be in big trouble. My suggestion/idea would be using negative `z-index` instead, to bring the button behind the DIV (making impossible to perform an accidental UI action on such element. Or as I stated before - make both the div and button siblings of a common wrapper. – Roko C. Buljan Aug 12 '17 at 21:49
1

@Roko C. Buljan using z-index is a good idea, I will do it that way . And yes I can see that the answer above makes the button invisible but even clickable and that is really a problem. Any way, thanks for c-smile and you for making it clear to me ,your explanations made me understand better now. – user6561572 Aug 13 '17 at 06:31

how to allow a hidden button to be shown when focused using CSS only?

1 Answers1