Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Estilos en la sección del input

12/17
Recursos

Aportes 156

Preguntas 32

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

outline: none; Nos sirve para quitar el borde generado cuando damos click a un input

Estilo de borde CSS
La border-stylepropiedad especifica qué tipo de borde mostrar.

Se permiten los siguientes valores:

dotted - Define un borde punteado
dashed - Define un borde punteado
solid - Define un borde sólido
double - Define un doble borde
groove- Define un borde acanalado en 3D. El efecto depende del valor del color del borde.
ridge- Define un borde ondulado en 3D. El efecto depende del valor del color del borde.
inset- Define un borde insertado en 3D. El efecto depende del valor del color del borde.
outset- Define un borde de inicio 3D. El efecto depende del valor del color del borde.
none - Define sin borde
hidden - Define un borde oculto
La border-stylepropiedad puede tener de uno a cuatro valores (para el borde superior, el borde derecho, el borde inferior y el borde izquierdo).

Nunca antes había utilizado ese color picker de el inspector🔥🔥🔥Que bakn esa herramienta, de hecho yo habia instalado algo parecido para hacer lo mismo, que no es tan buena como la del inspector de elementos.

No olviden que cuando nombran una clase a una etiqueta no hace falta ir nombrando de las etiquetas padres a los hijos en css hasta llegar a la deseada, pueden simplemente usar .nombre-de-la-clase { }

Se vuelve algo complejo el ir aprendiendo tantos comandos, por ejemplo, el de eliminar el borde azul entre otros. Pero la práctica es la que hace al maestro.

Durante este curso estoy aprendiendo un montón de buenas practicas 😄

outline: none;/* quita el borde azul q aparece en el input */```

Compañeros les comparto la pagina oficial para los iconos del buscador y el micrófono de google.
https://fonts.google.com/icons?icon.query=search
Y tambien la guía de uso.
https://google.github.io/material-design-icons/

En cuanto el proyecto crece es importante que se especifique cada clase ya que se vuelve complicado su lectura.

Examinando el buscador de Google encontré que la lupita es un elemento svg. Entonces copie y pegue su trazo para obtener este bello elemento.

<svg viewBox="0 0 24 24"  width="20px">
	<path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" ></path>
</svg>  
#dfe1e5

Es el color usado por el borde de Google, los tqm ❤️

Tengo un recorrido en crecimiento en el desarrollo web y nunca me imaginé que así se posicionaran los items dentro de un aparente imput. Que genial!

¿Cómo sabe el profesor exactamente los valores en pixeles? Es por la experiencia si?

¡Color picker!

Me ha gustado mucho la forma tan detallada en la que se explica este curso, complementa perfecto el curso de desarrollo web online. 😃

Por fin puedo quitar ese borde azul por defecto del input gracias a la propiedad outline: none; que alivio!


Hola este es mi resultado hasta ahora.

Recomendacion:
SI quieres que te quede exactamente al centro y del tamano correcto el buscador quítale el width a la sección con la clase main-input y que te quede así:

main .main-input {
    /* width: 580px; */
    margin: 0 auto;
    margin-bottom: 35px;
}

y al div con la clase main-input-container que te quede el width de 580px:

main .main-input-container {
    width: 580px;
    margin: 0 auto;
    border-radius: 100px;
    border: 1px solid #dfdfdf;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1px;
}

La herramienta de seleccionar color de DevTools está increíble. Yo usaba una extensión pero veo que hay cositas escondidas en el mismo navegador que valen la pena aprender bien. D:

Super útil el color picker del inspector de elementos. Luego de haber intentado la maquitación por mi mismo, me percato de que no llevaba un orden como el que llevamos hasta ahora.

Me gustó mucho la maquetación de de la barra de busqueda, yo hubiese hecho todo intentando modificar el input.

Brutality.

Que buena clase

Si les llega a pasar que no les aparece el contenedor largo con bordes redondos, (a mi me paso, y cuando entre al inspector me aparecía una advertencia en amarillo y decia “Invalid Property Value”) despues de mucha vuelta me di cuenta que hay que poner el border uno por uno:
border-color: ;
border-style: ;
border-width: ;
revisen este link: https://developer.mozilla.org/es/docs/Web/CSS/border-style

Me gusta mucho la explicación paso a paso

sencillo y puntual, me gustan los cursos que así

Excelente

bueno debería de ser para el input

main  .main-input-container input{
  width: 450px;
  height: 40px;
  border: none;
  outline: none;
}

más no

main  .main-input input{
  width: 450px;
  height: 40px;
  border: none;
  outline: none;
}

me parece muy buena la forma de maquetar el buscador ya que no modificamos los estilos del input si no del contenedor, mucho mas practico.

excelente no sabia esa lo de la herramienta para seleccionar el color

Color picker

Justo como lo diseñe en el reto, pero mas sencillo jaja
Buena lección!

Gracias no conocía el Color picker del inspector de elementos.

Cada ves mejor va quedando el proyecto 😄 !!

Ya encontre la respuesta, a mi pregunta que hice en la clase anterior

Que feliz que me hace este curso

para que hagan html mas rapido
https://docs.emmet.io/cheat-sheet/

Intenten poner

justify-content: space-between;

Debido a que hay tanta información, realice un método para evitar que se pierda en mi mente asi:
1- siempre hago la misma estructura para cada curso
![](

2- Escribo toda la información relevante para mí de forma que la pueda usar de forma rápida en los archivos de texto:
![](

De esta forma cuando desarrollo y me estanco, recuerdo que lo vi en alguno de los cursos y voy a buscarlo para lograr solucionar el problema.

Si alguien tiene una mejor forma sería bueno saberla.

Les recomiendo que agreguen un atributo (creo que así se llama 😅) que es placeholder y coloquen ahí el texto que tiene google, les dejo el código

<input type="text" placeholder="Haz una búsqueda en Google o escribe una URL"> 

Por cierto si quieren saber como puse un emoji en los comentarios es con tecla windwos + .
tecla windows + punto

Wow la verdad es que yo personalmente agregué los iconos dentro del input con un backround-image pero la forma como lo hizo Diego me sentir tonto jaja aprendí mucho en esta clase!

La tactica de buscar el color esta genial, sin necesidad de añadir plugins de chrome

se me olvido un px y se daño todo

importancia de colocar bien la medida

¡Qué genial aporte el de color picker dentro del inspector! Antes, había descargado una extensión de Chrome para esto, pero ahora lo haré desde el inspector!!

muy buena clase es la primera vez que trabajo con los atributos de input y ahora se como hacer que se vean mejor 😃

Cada que voy avanzando mas en el curso se me esta haciendo mas complejo, sera’ por que apenas estoy iniciando.

Dos anotaciones que me percate.

  • El profe en el main .main-input-container no coloca ningun valor de alto/height, ya que esta altura la predefine en el hijo main .main-input input sin embargo, para aquellos que estamos aprendiendo se deberia haber colocado el height:auto simplemente por temas de compresión.

  • Y la otra es que no creo que tiene mucho sentido el usar en la etiqueta main .main-input-container el “alig-items:center”, ya que igualmente la altura va a ser la misma que la del contenedor padre por lo que “no tiene espacio para centrar”, eso de lo que yo entendí y probe, ya que quite el “alig-items” y no me modifico nada

Si tienen el mismo problema que yo en el input por el color de fondo pueden usar esta propiedad

background-color: transparent;

Woow, no conocía la herramienta de copiar colores. Excelente clase, gracias Diego!

Color del borde
border: 1px solid #dfe1e5;

Creo que para los nuevos que vean esta clase, en los inputs, el outline ya no es azul, sino que ahora es de color negro

Me encanto el Color Piker!!! podemos ir a otras paginas y jalar el color! buenisimo!!! Si bien soy nuevo en esta area es mi primer curso y voy entendiendo todo! PlatziSalu2

Gracias por la explicación, ase tiempo que quería saber como le quitaba a ese borde a los imputs, y hoy fue ese día. Gracias ✔👏

Saber eso de outline si me sirvió de mucho, hice el clon al inicio sin ver la clase y no supe como quitárselo jaaja
Gracias por tan clara y buena clase!

Muchas gracias por la explicación instructor Diego, ahora noto que en verdad se ve mejor separando los elementos de la barra de búsqueda en 3 partes y añadiéndole estilos por separado.

Genial!! Darle los estilos a la barra de búsqueda de Google fue la parte que no pude hacer en el reto de la primera clase. Hasta ahora vamos a buen ritmo!

Mi clon. Nunca me imaginé que los elementos que aparecen en el input fueran elementos diferentes pero centrados, pensaba que era alguna propiedad del input

![](

Genial

Una consulta [email protected], en el minuto 9:38 al mandar a llamar la clase, llama primero al main luego al contenedor .main-input y de ahi al input porque no llamo a la clase del div que es .main-input-container si tambien contiene al input.

estoy aprendiendo mucho en este curso, ojala sigan realizando mas curso prácticos

Genial.

Me voló la cabeza esta clase 🤯
Tantos trucos, la facilidad con la que maqueta todo, son impresionantes!

no sabía lo del color picked,buena!

Me encanta hacer estilos! :3

Por alguna razón el input de mi clon de google sale así, alguna idea de qué pueda ser?

![](

#dfe1e5 el color del borde de la barra de google

Mi puntito, gracias.

Me explotó la cabez cuando vi lo que hiciste con el input.
Desde una practica anterior, tuve muchos problemas para posicionar iconos dentro del placeholder y ahora veo como es que lo hiciste, super genial y ahora encuentro la solucion a varios problemas

Considero que es mejor manejar los valores de “width” con porcentajes o vw para que sea un proyecto responsivo

Damn it! y yo yendo al photoshop y usando el gotero

EXCELENTE CLASE, Y BUENA EXPLICACION 😄

En este enlace van a encontrar distintos juegos dínamicos dónde podran poner en práctica conocimientos de html/css/js y reforzarlos de manera divertida.

URL =
https://codepip.com/games/

imposible olvidar la palabra “feo”

Si que estoy aprendiendo con este curso

Sencillo y claro. Y el truco del “auto” para centrar es algo que parece una tontería pero a veces da mucho la lata.

Azul feo

Chrome dev color picker

¿Sabías que estas letras no están escritas solamente en color gris?

Con el “color picker” del inspector de Google Chrome, mueve el picker sobre el buscador.
Hay una gran variedad de colores que se usan en el texto “Buscar en Google o escribir una URL”.

Siempre creí que estas letras sólo son de color gris. Fue un gran descubrimiento para mí. Si no lo sabías ¡Haz la prueba!

Creo que es muy útil ir avanzando por ramas, aprovechando así practicar los conocimientos de Git a la par

es increíble ver como va tomando forma todo y dices ahora todo tiene sentido, jajajajajaja.
Genial todo lo que aprende uno en tan corto tiempo.!!

Color del input: #dfe1e5

muy buen video esta interesante

interesantes progresos, vale totalmente la pena

estupendo que bonito es aprender día a día 😄

Nunca me he sentido tan feliz de maquetar.

esta es la fuente que utiliza google en el input

font: 16px arial,sans-serif;

Genial!

😮

Muy bueno, bastante práctica la clase, se asimila mas rapido la teoría

me están pareciendo unas clases muy buenas

Genial gran clase, repasando conceptos y conociendo nuevo

de a poco va quedando

¡Vaya, Excelente clase!
Este proyecto ya ha tomado mucha forma 😮

Esta clase estuvo genial

No sabía que existia el color picker por parte de dev-tools. Genial!

Se ve bien bonito