Heim > Web-Frontend > Front-End-Fragen und Antworten > So entfernen Sie das Eingabeklickfeld in CSS3

So entfernen Sie das Eingabeklickfeld in CSS3

WBOY
Freigeben: 2022-03-29 16:50:45
Original
6867 Leute haben es durchsucht

Methode: 1. Verwenden Sie den Selektor „:focus“, um das angegebene Eingabeelement auszuwählen. Die Syntax lautet „input element:focus{css style code;}“. 2. Verwenden Sie im CSS-Code des ausgewählten Eingabeelements Das Umrissattribut zum Entfernen des äußeren Rahmens ist ausreichend und die Syntax lautet „outline:none;“.

So entfernen Sie das Eingabeklickfeld in CSS3

Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS3- und HTML5-Version, Dell G3-Computer.

So entfernen Sie das Eingabeklickfeld in CSS3

1 Sie können zuerst den Fokusselektor verwenden, um das Eingabeelement auszuwählen

:Der Fokusselektor wird verwendet, um das Element mit Fokus auszuwählen.

: Der Fokusselektor akzeptiert Tastaturereignisse oder andere Benutzereingaben für Elemente.

2. Verwenden Sie dann das Umrissattribut, um das Feld zu entfernen, wenn Sie darauf klicken. Umriss (Umriss) ist eine Linie, die um das Element herum gezeichnet wird und sich am Rand des Randes befindet und das Element hervorheben kann.

outline-Kurzschrifteigenschaft legt alle Gliederungseigenschaften in einer Deklaration fest.

Die Attribute, die festgelegt werden können, sind (in der Reihenfolge): Umrissfarbe, Umrissstil, Umrissbreite.

Wenn der Attributwert auf „Keine“ gesetzt ist, hat das Element keinen äußeren Umrissrahmen.

Das Beispiel ist wie folgt folgt:

<html>
<head>
<meta charset="utf-8"> 
<title>123</title> 
<style>
.firstname:focus
{
outline:none;
}
</style>
</head>
<body>
<p>点击文本输入框表单可以看到黄色背景:</p>
<form>
First name: <input type="text" name="firstname" class="firstname"/><br>
Last name: <input type="text" name="lastname" />
</form>
<p><b>注意:</b>  :focus 作用于 IE8,DOCTYPE 必须已声明</p>
</body>
</html>
Nach dem Login kopieren

Ausgabeergebnis:

(Lernvideo-Sharing: So entfernen Sie das Eingabeklickfeld in CSS3CSS-Video-Tutorial

)

Das obige ist der detaillierte Inhalt vonSo entfernen Sie das Eingabeklickfeld in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
css
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage