Ir a la comunidad

Diseño y Programación Web

Comunidad oficial de diseñadores web, web developers y Webmasters. Aqui podemos tratar temas actuales sobre diseño y tecnología. Podemos compartir y actualizarnos. Flash, PHP, ASP, Java, HTML, CSS, MySQL, CMS, etc. Unite YA y lee los Sticky

Ver más
  • 17,217 Miembros
  • 12,964 Temas
  • 4,975 Seguidores
Hace más de 9 meses
  • 0

[Pedido] Bordes en los "input text"

Quiero saber cual es el codigo que usa taringa en los buscadores, los bordes de color azul. Así:


Estoy practicando formularios y quiero aprender mas cosas. Gracias
  • 0
  • 0Calificación
  • 0Seguidores
  • 190Visitas
  • 0Favoritos

6 comentarios

@pichoncitotv Hace más de 9 meses
es la propiedad CSS outline, funciona de manera similar a border, es una propiedad que por defecto en Chrome da un resplandor azul en los campos de texto.
@Game11Hacker Hace más de 9 meses
Y existe codigo para hacerlo?
@GRED_ Hace más de 9 meses
Saludos @Game11Hacker sera esto lo que buscas ->



<style type="text/css">
    input{font-size:18px;font-family: Arial, helvetica;outline:none;transition: all 0.5s ease-in-out;-webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;border:1px solid rgba(0,0,0, 0.2);color:#969696; }
     
    input:focus { box-shadow: 0 0 4px #B8E1FF;-webkit-box-shadow: 0 0 4px #B8E1FF;-moz-box-shadow: 0 0 4px #B8E1FF; border:1px solid #0193fd;background-color:#ffffff;}
    </style>

            Nombre: <input type="text"  />
@Game11Hacker Hace más de 9 meses
@GRED_ funciona! Gracias, el css lo coloque dentro de la etiqueta <form> se supone que valla hay?
@sergior69 Hace más de 9 meses
Te recomiendo que coloques el codigo css (style) en un archivo separa del html. Y lo que hagas es invocarlo desde tu html.
Son mejores practicas, no quiere decir que lo que estes haciendo este mal, solo que te ayudara a tener todo mas organizado.
@GRED_ Hace más de 9 meses
De nada @@Game11Hacker, pero como te esta diciendo @sergior69 haz una hoja de estilo aparte y solo invócala a tu html... Te dejo un ejemplo de como harías los dos archivos y como invocarías tu estilo .Css a tu html...

De resto pura practica y trata de conseguirte información sobre el tema en google u otra fuente ya que imagino vas comenzando y lo mejor seria seria que lo hicieras como debe ser... eso te ahorrara tiempo en el futuro... Aprende, leete por lo menos lo básico sobre html y css, y como dije antes lo demás lo agarras con practica...





//tu-archivo.css

.tu-input{font-size:18px;font-family: Arial, helvetica;outline:none;transition: all 0.5s ease-in-out;-webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;border:1px solid rgba(0,0,0, 0.2);color:#969696; }
     
.tu-input:focus { box-shadow: 0 0 4px #B8E1FF;-webkit-box-shadow: 0 0 4px #B8E1FF;-moz-box-shadow: 0 0 4px #B8E1FF; border:1px solid #0193fd;background-color:#ffffff;}

------------------------------------------------------------------------------

//tu-archivo.html

<html>

    <head>

    <!--De esta manera llamas tu archivo Css-->
    <link rel="stylesheet" type="text/css" href="tu-archivo.css"/>

    </head>

<body>

        <!--De esta manera llamas tu clase guardada en el Css, class="tu-input"-->
    Nombre: <input class="tu-input" type="text"  />

</body>
</html>
Tienes que ser miembro para responder en este tema