Q:

Como utilizar css en input de manera correcta

Se supone que los inputs deben estar transparentes y me salen de esta manera... Alguien sabe como lograr que se vean bien

A:

Puedes agregar una clase a los inputs con estos estilos.
.your-class{
  -webkit-appearance: none;
  -moz-appearance:    none;
   appearance: none;
   background-color: transparent;
}

Con esos estilos de css, lo que haces es quitar los estilos por defecto de los input de la mayoria de los navegadores (https://caniuse.com/#feat=css-appearance) y con la propiedad background-color asignas un color transparente al input.

