New question

Question:

Date: 08-03-2021 12:24:54 (In Spanish)

Problemas con el diseño de un input en los navegadores[Unresolved]

He desarrollado un input type search para realizar búsqueda de personas para una red social. Resulta que estoy trabajando un un Framework de diseño pero el input type search para buscar personas lo personalice un poquito con mis propios estilos css porque no me gusta los estilos que me facilita el framework.

Resulta que en el navegador Google Chrome se ve muy bien el input pero en firefox este no se ve muy bien. He probado en casi todos los navegadores y solo se ve mal en Firefox y no se como solucionar este problema.

Firefox:
[url=https://ibb.co/qDvQJ0M][/url]

Google Chrome:
[url=https://ibb.co/8jFTw56][/url]

Solo quiero que en Firefox se vea igual que en el navegador Google Chrome.

Código CSS3 personalizado del input type search:

/* label input type search */
.input-field input[type=search]:focus + label {
  color: #9c27b0 !important;
}

/* label underline focus color type search */
.row .input-field input[type=search]:focus {
  border-bottom: 1px solid #9c27b0 !important;
  box-shadow: 0 1px 0 0 #9c27b0 !important;
}

/* label focus color */
.input-field input:focus + label {
  color: #fa4299 !important;
}

/* label underline focus color */
.row .input-field input:focus {
  border-bottom: 1px solid #fa4299 !important;
  box-shadow: 0 1px 0 0 #fa4299 !important;
}
Tags: CSS - CSS3 - Firefox - Google Chrome Votes: 0 - Answers: 1 - Views: 3 Share on: Google Facebook Twitter LinkedIn Link
 

Answers:

  • Date: 07-04-2021 06:58:39 Has probado agregando a tu CSS -webkit-box-shadow y -moz-box-shadow?. Por ejemplo:
    .elemento {
    -webkit-box-shadow: 0 8px 6px -6px black;  
    -moz-box-shadow: 0 8px 6px -6px black;        
    box-shadow: 0 8px 6px -6px black;
    }
      Votes: 0 - Link answer
     
To actively participate in the community first must authenticate, enter the system.Sign In