benutzerdefinierten HTML-Eingabefeld auf Fokus Ausgabe

Ich versuche, ein HTML-Eingabefeld wie das Bild unten zu entwickeln:benutzerdefinierten HTML-Eingabefeld auf Fokus Ausgabe

Ich habe es mit dem folgenden Code:

input[type=text] { 
 
    background: transparent; 
 
    border: none; 
 
    border-bottom: 1px solid #000000; 
 
    padding: 2px 5px; 
 
} 
 
input[type=text]:focus 
 
{ 
 
    border: none; 
 
    border-bottom: 1px dashed #D9FFA9; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 

 
    Name : <input type="text" /> 
 
    
 
</body> 
 
</html>

PROBLEM:
Hier, wenn ich das Eingabefeld konzentrieren, und starten Sie Text einen blauen Rand eintritt, erscheinen um das Eingabefeld wie in der folgenden Abbildung gezeigt.

Ich muss diese blaue Rahmenbox entfernen. Wie es geht?

Quelle

2016-02-20 rusty bit

Sie werden wirklich mit Antworten gespammt. Die Hälfte der Leute, die diese Frage gesehen haben, haben eine Antwort versucht! ;) –

hinzufügen outline: 0 zu Ihrem css

input[type=text] :focus 
{ 
    border: none; 
    border-bottom: 1px dashed #D9FFA9; 
    outline: 0; 
}

Ich will hinzufügen, dass dies dort zu einem Zweck ist und zeigt einen Benutzer, wenn der Eingang fokussiert ist - es ist eine gute Praxis, um zu Stil (ändern Farbe für Beispiel), nicht entfernen

Quelle

2016-02-20 06:45:23

Hinzufügen outline: none; zu Ihrem CSS, in input:focus Bitte beachten Sie, dass input[type=text]: focus sollte input[type=text]:focus sein.

Siehe aktualisiert Schnipsel hier:

input[type=text] { 
 
    background: transparent; 
 
    border: none; 
 
    border-bottom: 1px solid #000000; 
 
    padding: 2px 5px; 
 
} 
 
input[type=text]:focus 
 
{ 
 
    border: none; 
 
    border-bottom: 1px dashed #D9FFA9; 
 
    outline: none; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 

 
    Name : <input type="text" /> 
 
    
 
</body> 
 
</html>

hoffe, das hilft! :)

Quelle

2016-02-20 06:48:01

Fügen Sie einfach

outline:0;

oder

outline:none;

in Ihrem CSS :)

Quelle

2016-02-20 06:48:38

Entfernen Sie den Leerraum zwischen input[type=text] und :focus

Und fügen outline: none; zu input[type=text]:focus

input[type=text] { 
 
    background: transparent; 
 
    border: none; 
 
    border-bottom: 1px solid #000000; 
 
    padding: 2px 5px; 
 
} 
 
input[type=text]:focus 
 
{ 
 
    border: none; 
 
    border-bottom: 1px dashed #D9FFA9; 
 
    outline: none; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 

 
    Name : <input type="text" /> 
 
    
 
</body> 
 
</html>

Quelle

2016-02-20 06:48:39 Munawir

Added outline:0 oder outline:none auf input[type="text"]:focus in Ihrem CSS.

input[type="text"]:focus{ 
    outline:none 
}

Quelle

2016-08-08 10:28:12

benutzerdefinierten HTML-Eingabefeld auf Fokus Ausgabe

Antwort

Verwandte Themen