Comment faire une bordure ombrée sur une entrée de formulaire?

Question

Bonjour je suis chargé de faire un regard champ de saisie comme la capture d'écran ci-dessous:

Je peux tout faire, sauf la chose d'ombre à la frontière. Est-ce possible en utilisant css?

Dans le fichier photoshop, ce calque reçoit un "Inner Glow" qui est responsable de l'ombre de la bordure.

Voici une capture d'écran du style de calque:

Voici mon css jusqu'à présent juste Incase il est nécessaire:

#input_1_1 { 
    background-color: #f1f5f6; 
    border-radius: 12px; 
    height: 47px; 
    padding: 0 17px; 
} 

Merci!

Answer 1

Vous devez utiliser box-shadow -jouer juste avec les valeurs jusqu'à ce que vous correspondiez à la maquette.

input { 
    box-shadow: inset 0 0 10px rgba(0,0,0,0.8); 
} 

Answer 2

Quelque chose comme ceci:

#input_1_1 { 
 
    background-color: #f1f5f6; 
 
    border-radius: 12px; 
 
    height: 47px; 
 
    padding: 0 17px; 
 
    border: none; 
 
    box-shadow: inset 0 0 10px 0 rgba(0,0,0,0.4); 
 
}

<input id="input_1_1" type="text" name="name">