CODEWITHSUNDEEP
htmlioscss
user8781534
user8781534

Reputation:

CSS - :focus Not Working on iOS

When I click a link the font-size does not get bigger on iOS but on android it does work. How do I get it to work

What I have tried:

ontouchstart="" in the body tag

jQuery:

$(".primary-menu li a").on('click', function() {
    $(this).css("font-size", "15px");
});

CSS:

.primary-menu li a:focus {
    font-size: 15px !important;
}

Neither the jQuery or CSS Works on the iOS only Android

Thank You

Upvotes: 1

Views: 5232

Answers (3)

fred727
fred727

Reputation: 2819

The cleanest solution seems to add a tabindex="0" attribute on the element. This way, CSS selector works.

Last problem is that focused element doesn't lose focus when you click outside of it.

Upvotes: 0

klues
klues

Reputation: 937

I had the same problem of non working :focus selector (in my case on a button) on iOS and this is my solution:

<button onclick="this.focus()">Button</button>

So it is necessary to manually focus() the button onclick (I have no clue why). In my case it seemed to be to only working solution, tried others here: https://jsfiddle.net/sz1L75ro/8/

In case of the problem of the threadstarter I would suggest to also add the same onclick listener to the a elements:

<a onclick="this.focus()">Link</a>

Upvotes: 3

Scott Anderson
Scott Anderson

Reputation: 693

By no means an expert on css, or JavaScript for that matter but Googling around the same subject area (pure css event actions for iOS/mobile) has shown me that examples are quite hard to come by, however where I was looking for examples with flyouts here is an interesting example:

  • [https://codepen.io/Tont/pen/hdsev][1] - Using a checkbox with 'display: none' over a button. The css references whether this input is 'checked' here:

    input:checked ~ ul.submenu{ max-height:300px; transition:max-height 0.5s ease-in; }

The same hidden checkbox methodology could be used to implement a pure css 'click' event handler with the action to be taken being change the font size of the <a> element.

Can't really help you with the JQuery as I don't have a way to test my code easily on iOS, however maybe try .setAttribute(<attribute_name>, <attribute_value>) instead of .css.

Upvotes: 0

Related Questions