Hello ,
my team and I are trying to find a way to include :focus pseudoclass on our application without using JS Code , just by simply using CSS if its possible . Is there a way to achieve that ? If not , then what can we do to have :focus on our site?
ah, ok,
in that example, the thing that receives focus is a link, so you could do a similar thing in outsystems.
if you want for all occasions where a card is inside a link, to give the card a special appearance on focus, you can do something like this (i just copied the css from that example) :
a:focus .card{
-webkit-box-shadow: 0 0 0 2px #1a73e8;
box-shadow: 0 0 0 2px #1a73e8;
outline: 2px solid transparent;
}
but i would think you want this a bit more in a controlled / confined way, so i would give either the link or the card an extra class for those case where you want this, for example
give the link around the card extra class 'link-card' and modify your css to :
a.link-card:focus .card{
Dorine
hi Meletis,
this is CSS, not javascript, so what is holding you back form just using it ?
what are you having problems with, how dit you try to use it ?
what exactly do you mean by "have :focus on our site", you don't have it on a site, you can apply it on elements in the dom.
There is a common use of :focus on every site , when you use TAB key , am I right ? This is not being applied on our site though and as i see nowhere in OutSystems . We want our User to be able to use the site without even touching the mouse ( if its necessary ) and simply using Tab to navigate to the whole application . Im just merely asking If there is a common use not to Have :focus on Outsystem's applications or there is a problem there . We are having 25+ pages and its not easy to write CSS for every element / widget we are going to use , so im asking if there is a solution about it .
still not clear what the problem is, do you have a problem with tabbing or with the focus pseudoclass ? And what exactly is the problem ?
There is no :focus in the site and nowhere else in outsystems . we don't have the time to go specific in every element / widget to apply the pseudoclass . I dont know if there is somewhere "inside" Outsystems' core a JS script for that reason .
:focus is a pseudoclass of CSS dictating how an input that has the focus looks like. This is available in Outsystems, why do you say it is not ? can you show what you are doing.
This has nothing to do with tab key or with "using the application without mouse", so I'm thinking you have a problem with that, and looking in the wrong direction to solve it.
The best practice for :focus is best explained by Google @ https://about.google/products/IF we go and create a new module with no CSS and JS scripts ( choose a random example that OS provides , aka. FourColumnGallery ) , we will be able to see the differences . See screenshot below , this is the :focus Outsystems provides . { turned them to links to be easily visible for this example }
or even a variation between above 2 options, where you only want a card to get a border when it is the first child of a link
a:focus>div>.card{
We are really thankful for your precious time and your fast responses actually helped us a lot and if i might say , it broadened our horizons .
Thank you Dorine, MeL
i've been accused of many things, but not often of broadening peoples horizons ;-)
thanks for that compliment, it means a lot