Make div focusable and apply parent link on select

Question

It is possible to make the child of a link, instead of the link itself focusable. But is it also possible to follow the parent link on enter? (without javascript) So in the example below I want to go to Google if I hit enter if the div is focussed.

.padded-button {
  display: inline-block;
  padding: 20px;
  cursor: default;
}
.button {
  padding: 10px;
  background-color: blue;
  display: inline-block;
  color: #fff;
  cursor: pointer;
}

<a href="http://google.com" class="padded-button" tabindex="-1">
    <div class="button"  tabindex="0">button</div>
</a>

Note: I'm trying to create a button that acts like a regular button if you use it with a mouse / keyboard, but have a bigger tap area for touch.

Serg Chernata · Accepted Answer · 2017-01-18T12:44:41.640

2

Not entirely possible without js. You can apply styles to fake focus on the child element, ie:

.padded-button:focus .button{ outline: 3px solid red; }

But if you have actual focus on a child element of an anchor tag, pressing enter will not bubble up to the parent.

https://jsfiddle.net/Lentqf4u/

edited Jan 18 '17 at 12:44

answered Jan 18 '17 at 12:26

Serg Chernata

12,280
6
32
50

Yes it already gets the right focus, but if I have the div focussed and press enter, it does not follow the link. – klaasjansen Jan 18 '17 at 12:32
I updated the question a little bit to make it more clear. – klaasjansen Jan 18 '17 at 12:33
I like the workaround. Is it possible to style the focus as the default focus style of the browser? – klaasjansen Jan 18 '17 at 13:15
Yeah, just look up what the default is. I would look at the spec or something like normalize css for a sample. – Serg Chernata Jan 18 '17 at 13:52

score 2 · Answer 2 · edited May 23 '17 at 12:24

2

You can try this:

.padded-button {
  display: inline-block;
  padding: 20px;
  cursor: default;
}
.button {
  padding: 10px;
  background-color: blue;
  display: inline-block;
  color: #fff;
  cursor: pointer;
}

<form method="get" action="http://google.com" class="padded-button" >
    <button class="button" type="submit" >button</button>
</form>

Based on this: How to create an HTML button that acts like a link?

I am not sure about all browsers behaviours, though.

edited May 23 '17 at 12:24

Community

1
1

answered Jan 18 '17 at 12:44

er-han

1,859
12
20

Sorry, this is not what I intended. Now tapping on the form element does not submit the form. Only tapping on the button does. – klaasjansen Jan 18 '17 at 14:46

Manikandan Velayutham · Answer 3 · 2017-01-18T13:24:57.333

0

.padded-button {
  display: inline-block;
  padding: 20px;
  cursor: default;
}
.button {
  padding: 10px;
  background-color: blue;
  display: inline-block;
  color: #fff;
  cursor: pointer;
}
.button:focus{ outline: 1px solid red; }
.button:hover{ outline: 1px solid red; }

<!--<a href="http://google.com" class="padded-button" tabindex="-1">
    <div tabindex="2" class="button" focus="true">button</div>
</a>-->
<form method="post" action="http://google.com">
    <button class="button" type="submit">button</button>
</form>

edited Jan 18 '17 at 13:24

answered Jan 18 '17 at 13:07

Manikandan Velayutham

2,228
1
15
22

This does not work. If the div has focus and I press enter, I don't go to google. – klaasjansen Jan 18 '17 at 13:12
Why? remove href. Why need href? – Manikandan Velayutham Jan 18 '17 at 13:16
or else
button
– Manikandan Velayutham Jan 18 '17 at 13:17
Sorry, I think you don't get what I want to achieve. I want to make it possible to use 'tab' to go to the div and use the enter key on the div to go to google.com. – klaasjansen Jan 18 '17 at 13:18

score 0 · Answer 4 · answered Jan 18 '17 at 13:19

Yes it is possible. The code below shows that if you click or focus the div it will redirect to the parent link. You can make the div look like a button just by altering it's CSS. Also you can increase the focusing or clicking area by increasing the height and width CSS attribute.

#btn
{
  width:100px;
    height:100px;
  background-color: red;
  }

<a href="https://www.google.co.in">
  <div id="btn">click me
    </div>
  </a>

Just make sure you don't have any other button or link inside the parent a tag. Also it is not a good practice to wrap a div inside a tag in HTML 4.01. Hope this helps.

Ehm... now the focus is on the link, not on the div. – klaasjansen Jan 18 '17 at 13:31 — klaasjansen, Jan 18 '17 at 13:31

Make div focusable and apply parent link on select

4 Answers4