He notado que en algunas páginas, los elementos tienen un estilo circular cuando reciben el foco, lo cual me parece muy elegante. Los ejemplos que di son de Twitter y Clothia:
Ya intenté poner un border-radius en el foco y al elemento, pero no funcionó. Lo que funcionó para mí, fue eliminar el outline del foco, colocar un div en el mismo nivel del elemento y aplicar un border-radius del 50% con posición absoluta y posición relativa, pero considero que esta es una mala práctica.
Éste es mi código (también en CodePen):
* {
margin: 0;
padding: 0;
}
body {
background-color: pink;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.box {
background-color: orange;
width: 50%;
height: 300px;
display: flex;
align-items: center;
}
.menu {
background-color: black;
height: 100px;
width: 100%;
display: flex;
justify-content: space-between;
}
.child {
text-decoration: none;
color: white;
text-align: center;
height: 100%;
width: 30px;
padding: 0 20px;
display: flex;
align-items: center;
outline: none;
justify-content: center;
position: relative;
}
.margl {
margin-left: 20px;
}
.margr {
margin-right: 20px;
}
.focus {
width: 70px;
height: 70px;
position: absolute;
background-color: transparent;
border-radius: 50%;
border: 4px yellow solid;
opacity: 1;
}
<body>
<div class="box">
<div class="menu">
<a href="javascript:void(0)" class="child margl">
<div class="focus"></div>
<p>Elementos</p>
</a>
<a href="javascript:void(0)" class="child">
<div class="focus"></div>
<p>Sin Foco</p>
</a>
<a href="javascript:void(0)" class="child margr">
<div class="focus"></div>
<p>Test</p>
</a>
</div>
</div>
</body>
¿Hay alguna manera de obtenerlo con JavaScript? Es decir que al recibir el foco, poner un código fantasma en el HTML, o sea que no se vea en las herramientas de desarrollador.
¿O alguna forma de hacerlo de manera más óptima?
P.D: Publiqué esta pregunta en inglés en StackOverflow versión inglés. Y me borraron la pregunta. Digo si no sabían hubieran dicho no y ya, en fin, espero puedan ayudarme.