CSS-Eingabe-Gliederung wird nicht entfernt

-1

Ich stoße auf ein Problem, bei dem die blaue Standardkontur bei der Fokussierung von Eingabefeldern nicht entfernt wird, obwohl zwei CSS-Techniken zum Entfernen der Gliederung verwendet wurden. Ich habe versucht, input:focus und input[type="text"]:focus zu verwenden, aber beide entfernen diese Gliederung. Was mache ich möglicherweise falsch mit meinem CSS?CSS-Eingabe-Gliederung wird nicht entfernt

Hier ist meine Form mit dem comment-box Eingang:

<div class="comment-form"> 
    <form action="/app/blog/{{this.blogId}}/comment" method="post"> 
     <label for="data-comment">Comment:</label> 
     <br /> 
     <input type="text" name="comment" class="comment-box"> 
     <button type="submit" class="comment-submit">Comment</button> 
    </form> 
</div>

Hier ist die CSS (input.comment-box CSS arbeitet):

input.comment-box { 
    width: 80%; 
    box-sizing: border-box; 
    border: 2px solid #D8D8D8; 
    border-radius: 4px; 
} 

.comment-box input:focus { 
    border: 2px solid #D8D8D8; 
    outline: none !important; 
}

Quelle

2017-01-14 cphill

Schwer von Ihrem Code zu unterscheiden. Ich würde vorschlagen, zum Inspektor zu gehen und das Element auszuwählen. Dann klicke rechts neben tot element.style und versuche es erneut. Wenn dies nicht funktioniert, sollte es nicht sinnvoll sein, mit der rechten Maustaste auf das Element zu klicken und zum Kopieren-> Selektor zu gehen. Wählen Sie das Element aus und finden Sie unter der Registerkarte "Stile" heraus, was den blauen Text für den Fokustext blockiert. Es muss etwas sein. –

.comment-box input:focus bedeutet ein Eingabefeld in der .comment-box Klasse, das heißt,

<div class="comment-box"> 
    <input type="text"> 
</div>

Was Sie pro Bably wollen, ist:

input.comment-box:focus { 
    outline: none; 
}

oder nur

.comment-box:focus { 
    outline: none; 
}

Quelle

2017-01-14 22:51:40

Das Problem mit dem Selektor ist .comment-box input:focus. Das wird input:focus innerhalb von .comment-box Ziel, die nicht existiert.

Der Wähler muss entweder .comment-box:focus oder input:focus oder .comment-form input:focus

Quelle

2017-01-14 22:52:03

Für diesen Fall sein, geben Sie immer zuerst kommen sollte> Klasse/id> Pseudo-Klasse.

input.comment-box:focus { 
    outline: none; 
}

Ansonsten

.comment-form input:focus { 
    outline: none; 
}

Quelle

2017-01-14 22:56:14 Quan

-1

Ich kann Ihnen nicht sagen, warum es in diesem Fall nicht funktioniert, aber ich werde vorschlagen, dass Sie sorgfältig denken und lesen http://www.outlinenone.com/, bevor Sie tatsächlich den Umriss entfernen. Es existiert, damit jemand, der keine Maus verwendet, zwischen den Formulareingaben navigieren und bestimmen kann, welcher den Fokus hat. Es scheint, dass Ihre Stile jede Unterscheidung zwischen dem fokussierten und unfokussierten Eingabefeld entfernen. Im Wesentlichen bedeutet dies, dass Sie zahlreiche Menschen mit Behinderungen von der Nutzung Ihrer Website ausschließen.

Quelle

2017-02-03 22:25:52

CSS-Eingabe-Gliederung wird nicht entfernt

Antwort

Verwandte Themen