Streaming live at 10am (PST)

Remove WebKit styling on div interactions?


#1

Hey guys,

I have sent you a video outlining a little problem I am having to support@. I'm sure it will be simple for you guys to overcome but I'm no coder, I'll try to explain it the best I can though.

I have placed click interactions on my div buttons but I'm getting a grey box appear when I press them on my iPhone.

Have you got a bit of custom code I can pop in the head to stop this (WebKit??) styling occurring on every device?

I can't attach a video here so take a look at the one I attached in my email to understand exactly what I mean or take a look at my site on an iPhone (I'm sure it's a problem on other devices too) as it isn't visible in preview mode. Site link also attached below.

https://preview.webflow.com/preview/mikefort?preview=49fb92fce732430f0014852ebbdabf7f

mikefort.webflow.io

Thanks for your help!!


#2

I think this is what you need!

.btn {
-webkit-tap-highlight-color: transparent;
}

https://developers.google.com/web/fundamentals/design-and-ui/input/touch/?hl=es


#3

Thanks for the help AB,

They aren't buttons, I used divs with interactions so would I have to use

.div {
-webkit-tap-highlight-color: transparent;
}

Or maybe to cover my back, use both but I'm not sure how I'd code that..?

I'm in my first few weeks of learning very minimal code so apologies for my lack of understanding.
I'm right in thinking I can just drop that into the custom code input from site settings right? Or do I have to use additional HTML; <div><script>, etc?

Cheers man.


#4


#5

Thanks Antonio, that's perfect for div-block-62. I've used the following to do the same to 60 and 61 too.

<style>
.div-block-60, .div-block-61, .div-block-62 {
-webkit-tap-highlight-color: transparent;
}
</style>

Is there a way to specific ALL div-block's so I can build on that rule?

Thanks!


#6

You could create a parent class and attach all the numbered divs to the parent.
- With that... you could target the 1 parent div.

As an alternative...
- You could also use jquery to loop / find all the associated divs.
- but you did mention... you are not a coder.

interesting that your website... (which I find visually appealing)
- displays... code.


#7
div[class*="div-block-"] {
    -webkit-tap-highlight-color: transparent;
}

This will target all the divs that contain a class that start with div-block-


#8

there you go. @AntonioBalderas did exactly what I was saying.

I was in the middle of doing myself... but he's faster than me :slight_smile:


#9

HAHA I know... oh the irony.

It's just going to be a fancy resume though, I couldn't be bothered trying to recreate the actual page so I just copy and pasted some HTML. I can hear your brain crying though.

Plus, it's a design job I'm going for so all good.

Cheers for the pointer though, I'll go research parent divs so I know what the heck that means, I've meant to but never got round to it.

Nice one!


#10

What a guy!

This is great, I've never really done forums so thanks for helping me out so quick Ant.

So, if you just post a question after hitting a dead end for a while, does it usually get answered this quick?


#11

Generally yes that is how most forums work but that also depends on how complex the question is, how big the audience is and of course how it is asked too. Gratitude really does go a long way both in real life and on the internet.

Great job on the website and your affinity for solving problems along with the help of the webflow community. You also seem to grasp CSS pretty quickly in that you helped yourself and figured out how to adjust a rule to target 3 separate elements and also asked just the right question afterwords about how to optimize the rule to target all 3 or more with a single statement.

Great job!


#12

Thanks for your kind words Philip, your support means a lot!

As I'm only learning about code as and when I need it, I find that I don't so much need an answer but instead to find how to ask the right question to go and do my own research.

I learnt some JQuery last night which has solved a massive problem for me, it took me 10 minutes to implement but nearly 5 hours to find the right terminology to find relevant threads on Stack Overflow. I cannot tell you how rewarding it was though haha.

Thanks again though,
UXM


#13

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.