Surlignement avec le Hover

**labarre2002** · 01/12/2022, 17h36

Bonjour

Je réalise un formulaire comme celui-ci:

https://www.hipoly.fr/contact/

le mien

Nom : w.jpg
Affichages : 203
Taille : 18,8 Ko

mon

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<body>
 
<form method="post" action="">
<div class="field">
    <input class="first" type="text"  value="Fullname">
    <input class="first" type="text" value="email">
</div>
   <div class="principal">
    <textarea name="" id="" cols="52" rows="2">Your Message</textarea>
   </div>
    <div>
        <input class="submit" type="submit" value="Submit">
 
 
    </div>
 
 
 
 
</form>

mon

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
body{
 
max-width:1200px;
background-color: royalblue;
margin: auto;
display: flex;
align-items:center;
justify-content:center;
}
 
.first{
    background-color: transparent;
    border: none;
    margin-right: 48px;
    border-bottom: 1px solid #F0FFF0;
    outline: none;
}
 
textarea{
    background-color: transparent;
    border: none;
    border-bottom: 1px solid #F0FFF0;
    outline: none;
}  
 
.field{
margin-bottom: 45px;
 
}
 
.principal{
    margin-bottom: 42px;  
}
 
.submit{
    border-radius: 4px;
    border: none;
    outline: none;
}
 
 
.first {
    background: 
        linear-gradient(currentColor 0 0) 
        0 100% /var(--d, 0) 3px 
      no-repeat;
    transition:0.5s;
  }
  .first:hover {
    --d: 100%;
  }

le souci est le suivant quand je clique dans un champ une ligne s ajoute en surplus de la bordure blanche
comme ceci:

Nom : azerty.jpg
Affichages : 199
Taille : 6,6 Ko

Nom : azerty.jpg
Affichages : 199
Taille : 6,6 Ko

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
.first {
    background: 
        linear-gradient(currentColor 0 0) 
        0 100% /var(--d, 0) 3px 
      no-repeat;
    transition:0.5s;
  }
  .first:hover {
    --d: 100%;
  }

Pourrais-je avoir des explications pour résoudre la superposition de la ligne généré par le hover ?

Merci.

**gesualda** · 02/12/2022, 09h19

Hello

Peut etre :

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

a{text-decoration: none;}

**labarre2002** · 02/12/2022, 16h13

Bonjour

merci pour votre message je comprends pas votre message je n ai pas d elements a dans mon code

**gesualda** · 06/12/2022, 09h07

Bonjour,

Oui, en effet, essayer plutôt:

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 input, textarea
   {            
      outline:none;
   }

Surlignement avec le Hover

Survol d'un élément en CSS (:hover)

Discussions similaires

Partager

Partager