1

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:

Ejemplo de Foco de Twitter Ejemplo de Foco de 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.

7
  • 1
    Espero no estar equivocado, pero cuando añades elementos dinámicos en el DOM, dichos elementos también se ven en el element inspector. Aparecen y desaparecen dinámicamente mientras el codigo las añade y destruye.
    – VRoxa
    Commented el 13 may. 2020 a las 0:15
  • Estas en lo cierto VRoxa, de hecho a menos de que estes usando la etiqueta template y que no la hayas rellenado aun con contenido, cualquier elemento sea creado con javascript o puesto directamente en el HTML, siempre podra verse en el inspector de elementos y definitivamente no hay manera de impedirlo.
    – Layer
    Commented el 13 may. 2020 a las 0:16
  • Quitar el outline y poner un borde redondo no es ideal, pero es la única manera de hacerlo de momento, porque ningún navegador aplica el border-radius a los outline (fun fact: ¡excepto Safari! Safari permite tener outlines redondeados :P)
    – Alvaro Montoro
    Commented el 13 may. 2020 a las 0:17
  • Es triste... en stackoverflow en ingles son mas agresivos con lo de las preguntas, he visto casi como si cuando no saben resolver algo simplemente votan en negativo, a mi me ha pasado al formular preguntas con dificil respuesta en el sitio, pero las consideraba totalmente validas (he visto peores preguntas bien recibidas en la comunidad inglesa), por ejemplo preguntas que literalmente nisiquiera contenian codigo, muy triste la verdad.
    – Layer
    Commented el 13 may. 2020 a las 0:23
  • Muchas gracias por sus respuestas. Aunque me parece extraño que tanto en Twitter como en Clothia usen ese tipo de foco, y yo al intentar examinar los elementos no me aparezca nada acerca del foco, o al menos un indicio de como hacerlo.
    – JesseBelt
    Commented el 13 may. 2020 a las 0:24

1 respuesta 1

2

A día de hoy, la mayoría de los navegadores no respeta el border-radius a la hora de aplicarlo al outline (cosa graciosa, el único navegador que lo hace ahora mismo es Safari, y Firefox de forma no-estándar).

Entonces, una manera utilizada comúnmente para simular un outline redondeado sería usando el box-shadow o el borde. De hecho, box-shadow es la manera que usa Twitter para hacerlo.

Si te preocupa quitar el outline por programas de asistencia como lectores de pantalla o similares, puedes dejar el foco pero ponerlo transparente para que no se vea.

Así, podrías hacer algo como esto:

a {
  border-radius: 50%;
  display: inline-flex;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
}

a:focus {
  box-shadow: 0 0 0 2px #369;
  outline: 2px solid transparent;
}
<a href="#">
  <svg width="24px" height="24px" viewBox="0 0 24 24">
    <path d="M2,4 22,4 22,20 2,20 2,4 12,14 22,4" stroke="#369" fill="none" stroke-width="2" />
  </svg>
</a>

<a href="#">
  <svg width="24px" height="24px" viewBox="0 0 24 24">
    <path d="M2,4 22,4 22,20 2,20 2,4 12,14 22,4" stroke="#369" fill="none" stroke-width="2" />
  </svg>
</a>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.