Je crée une zone de saisie 'arrondie' et en arrondissant le coin en CSS, cela a créé cette étrange ombre, et je n'arrive pas à comprendre ce qui la cause
<form>
<div class="input-field email-input">
<input id="email" type="text" class="validate" placeholder="Enter Your Email Adress"/>
</div>
<div class="input-field password-input">
<input id="password" type="text" class="validate" placeholder="Enter Your Password"/>
</div>
</form>
.form-wrapper {
display:flex;
justify-content: center;
margin: 2em 0px;
}
.password-input input{
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
input {
width:400px;
padding: 3em;
}
input::placeholder {
color: gray;
}
.email-input input{
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
6 Réponses :
J'ai trouvé une solution à une autre question sur la pile trouvée ici
l'ajout de border: none et le style après le résoudre, ce qui m'est encore étrange.
border: none; /* <-- This thing here */ border:solid 1px #ccc;
Cette étrange ombre est là parce que vous avez un rayon de bordure sans bordure. Ajoutez simplement la bordure de la couleur souhaitée.
<form>
<div class="input-field email-input">
<input id="email" type="text" class="validate" placeholder="Enter Your Email Adress"/>
</div>
<div class="input-field password-input">
<input id="password" type="text" class="validate" placeholder="Enter Your Password"/>
</div>
</form>
.form-wrapper {
display:flex;
justify-content: center;
margin: 2em 0px;
}
.password-input input{
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border: 1px solid #999;
}
input {
width:400px;
padding: 3em;
}
input::placeholder {
color: gray;
}
.email-input input{
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border: 1px solid #999;
border-bottom: 0;
}
Ecrivez une propriété css border dans la balise d'entrée HTML5!
<form>
<div class="input-field email-input">
<input id="email" type="text" class="validate" placeholder="Enter Your Email Adress" />
</div>
<div class="input-field password-input">
<input id="password" type="text" class="validate" placeholder="Enter Your Password" />
</div>
</form>
.form-wrapper {
display: flex;
justify-content: center;
margin: 2em 0px;
}
.password-input input {
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
input {
width: 400px;
padding: 3em;
border: 1px solid #ccc;
}
input::placeholder {
color: gray;
}
.email-input input {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
Par défaut, il n'y a pas de bordure sur l'entrée, vous pouvez donc soit ajouter border: 1px solid color sinon il n'affichera rien
<form>
<div class="input-field email-input">
<input id="email" type="text" class="validate" placeholder="Enter Your Email Adress"/>
</div>
<div class="input-field password-input">
<input id="password" type="text" class="validate" placeholder="Enter Your Password"/>
</div>
</form>
.form-wrapper {
display:flex;
justify-content: center;
margin: 2em 0px;
}
.password-input input{
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
input {
width:400px;
padding: 3em;
border: 1px solid #ccc;
}
input::placeholder {
color: gray;
}
.email-input input{
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
Ce n'est pas un comportement étrange, c'est prévu . Les éléments input prennent le style par défaut pour la bordure.
Vous devez remplacer le style de bordure par défaut de la balise input . Utilisez border: 1px solid silver; pour remplacer le style de bordure par défaut pour l'entrée.
<form>
<div class="input-field email-input">
<input id="email" type="text" class="validate" placeholder="Enter Your Email Adress"/>
</div>
<div class="input-field password-input">
<input id="password" type="text" class="validate" placeholder="Enter Your Password"/>
</div>
</form>
.form-wrapper {
display:flex;
justify-content: center;
margin: 2em 0px;
}
.password-input input{
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
input {
width:400px;
padding: 3em;
border: 1px solid silver; /* <-- Override default border */
}
input::placeholder {
color: gray;
}
.email-input input{
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
Pourquoi ne pas simplifier les choses?
<html>
<head>
<style>
.form-wrapper {
display:flex;
justify-content: center;
margin: 2em 0px;
}
.field{
display:block;
width:400px;
border:1px solid green;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
#input1 {
width:100%;
border:0px; border-top:0px solid red;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
#input2 {
width:100%;
border:0px; border-top:1px solid red;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;}
input {
min-height:80px;
height:auto;
padding: 3em;
}
input::placeholder {
color: gray;
}
</style>
</head>
<body>
<form>
<div class="field">
<input id="input1" type="text" placeholder="Enter Your Email Adress"/> <br>
<input id="input2" type="text" placeholder="Enter Your Password"/>
</div>
</form>
</body>
</html>
Je ne suis pas sûr de cette «étrange ombre» dont vous parlez. Tout ce qui change, c'est que les lignes deviennent plus épaisses, ce qui est le comportement attendu ...
Je parle aussi de ces lignes plus épaisses. J'ai pensé que la largeur de la bordure (par défaut) 1px resterait la même tout autour. Tout comme le coin inférieur gauche est resté normal.
Ils proviennent du
border-radius: 10px. Malheureusement, il n'y a pas de propriétéborder-radius'corner';en bas à gauchesera appliqué à la fois aux bordsbasetgauchedans leur intégralité. Si vous voulez éviter cela et colorer plutôt les bords mêmes, vous pourrez peut-être utiliserborder-color, comme illustré dans cet exemple .