Design-Platzhalter-CSS. Wie ändere ich die Farbe des Tooltip-Textes in einem Platzhalter mithilfe von CSS-Stilen? Aufgabe: Erstellen Sie Ihren eigenen CSS-Stil für Platzhalter

Typischerweise wird das Platzhalterattribut für Eingabe und Textbereich verwendet, um innerhalb dieser Elemente einen Aufruf zum Handeln bereitzustellen. In diesem Hinweis beschreibe ich verschiedene Optionen zum Gestalten des Textes von Platzhaltern sowie Optionen für deren Animation

So kann die Textfarbe unseres Platzhalters beispielsweise mithilfe der folgenden CSS-Regeln geändert werden:

::-webkit-input-placeholder ( color : #c0392b ;) ::-moz-placeholder ( color : #c0392b ;) /* Firefox 19+ */ :-moz-placeholder ( color : #c0392b ;) /* Firefox 18- */ :-ms-input-placeholder ( Farbe : #c0392b ;)

Die Länge des Codes für die Formatierung einer so einfachen Eigenschaft ist auf das Fehlen eines gemeinsamen Standards zurückzuführen. Daher hat jeder Browser die Unterstützung für die Platzhaltergestaltung auf seine eigene Weise implementiert.

Außerdem werden nicht alle unterstützt CSS-Eigenschaften. Hier ist eine Liste der genau unterstützten Eigenschaften:

Schriftart (und verwandte)
Hintergrund (und verwandte)
Farbe
Wortabstände
Buchstaben-Abstand
Textdekoration
vertikal ausrichten
Texttransformation
Zeilenhöhe
Texteinzug
Textüberlauf
Opazität

Es kommt auch vor, dass der Platzhaltertext die Breite des Eingabe- oder Textbereichselements „erweitert“ (ein häufiger Fall für mobile Geräte). Gleichzeitig werden unschöne Stellen automatisch abgeschnitten.

Eine CSS-Eigenschaft wie text-overflow: ellipsis hilft uns, dieses Problem zu beheben, indem dem zugeschnittenen Bereich des Platzhalters ästhetische Auslassungspunkte hinzugefügt werden. In Stilen schreiben wir so:

Eingabe [Platzhalter] (Textüberlauf: Auslassungspunkte;) Eingabe ::-moz-Platzhalter (Textüberlauf: Auslassungspunkte;) Eingabe:-moz-Platzhalter (Textüberlauf: Auslassungspunkte;) Eingabe:-ms-input-Platzhalter ( Textüberlauf: Auslassungspunkte ;)

Um unseren Platzhaltern noch mehr Ästhetik zu verleihen, ist es möglich, den Effekt hinzuzufügen, dass sie ausgeblendet werden, wenn das entsprechende Element den Fokus erhält.

Einige Beispiele für ein solches Verstecken mit Animationselementen:

/* Sanfte Änderung der Platzhaltertransparenz beim Fokussieren */.input ::-webkit-input-placeholder ( Deckkraft: 1; Übergang: Deckkraft 0,3 Sekunden Leichtigkeit ;) .input ::-moz-placeholder ( Deckkraft: 1; Übergang: Deckkraft 0,3 Sekunden Leichtigkeit ;).input :-moz- Platzhalter (Deckkraft: 1; Übergang: Deckkraft 0,3 s Leichtigkeit;).input:-ms-input-placeholder (Deckkraft: 1; Übergang: Deckkraft 0,3 s Leichtigkeit;).input (Deckkraft: 0; Übergang: Deckkraft 0,3 s Leichtigkeit; ) .input :focus::-moz-placeholder ( Deckkraft : 0 ; Übergang : Deckkraft 0,3 Sekunden Leichtigkeit ;).input :focus:-moz-placeholder ( Deckkraft : 0 ; Übergang : Deckkraft 0,3 Sekunden Leichtigkeit ;).input :focus :-ms-input-placeholder (Deckkraft: 0; Übergang: Deckkraft 0,3 Sekunden;) /* verschiebt den Platzhalter nach rechts, wenn er fokussiert ist */.input ::-webkit-input-placeholder (text-indent: 0px; Übergang: text-indent 0,3 s Leichtigkeit;) .input ::-moz-placeholder (text-indent: 0px; Übergang: text-indent 0,3 s Leichtigkeit ;).input :-moz-placeholder ( text-indent : 0px ; Übergang : text-indent 0,3s Leichtigkeit ;).input :-ms-input-placeholder ( text-indent : 0px ; Transition : text-indent 0,3s Leichtigkeit ;).Eingang :focus::-webkit-input-placeholder( text-indent : 500px ; Übergang : text-indent 0,3s Leichtigkeit ;).input :focus::-moz-placeholder ( text-indent : 500px ; Transition : text-indent 0,3s Leichtigkeit ;).input :focus:- moz-placeholder (text-indent: 500px; Übergang: text-indent 0,3 s Leichtigkeit;) .input:focus:-ms-input-placeholder (text-indent: 500px; Übergang: text-indent 0,3 s Leichtigkeit ;) /* verschiebt den Platzhalter nach unten, wenn er fokussiert ist */.input ::-webkit-input-placeholder ( Zeilenhöhe: 20 Pixel; Übergang: Zeilenhöhe 0,5 Sekunden;) .input ::-moz-placeholder ( Zeilenhöhe: 20 Pixel; Übergang: Zeilenhöhe 0,5 Sekunden ;).input :-moz-placeholder ( line-height : 20px ; Übergang : line-height 0,5 s Leichtigkeit ;).input :-ms-input-placeholder ( line-height : 20px ; Übergang : line-height 0,5 s Leichtigkeit ;).Eingang :focus::-webkit-input-placeholder( line-height : 100px ; Übergang : line-height 0,5s Leichtigkeit ;).input :focus::-moz-placeholder ( line-height : 100px ; Übergang : line-height 0,5s Leichtigkeit ;).input :focus:- moz-Platzhalter (Zeilenhöhe: 100 Pixel; Übergang: Zeilenhöhe 0,5 Sekunden Leichtigkeit;).input: Focus:-ms-Input-Platzhalter (Zeilenhöhe: 100 Pixel; Übergang: Zeilenhöhe 0,5 Sekunden Leichtigkeit;)

Lassen Sie uns hier fertig werden.

Wenn Sie mit dem Platzhalterattribut nicht vertraut sind, erklären wir Ihnen kurz, was es ist und wo es verwendet wird. Es wird in Formulareingabefeldern verwendet. Das Attribut zeigt einen Text im Eingabefeld an, der die Rolle eines bestimmten Hinweises darstellt. Früher auf unserer Website gab es ein Beispiel mit mit Javascript, positive Seite diese Methode Es ist browserübergreifend kompatibel. Lassen Sie uns nun über die Gestaltung des Platzhalterattributs sprechen, das für Eingabe- und Textbereichselemente verwendet wird.
Der Eingabefeldcode in unserem Beispiel sieht etwa so aus:

Als Ausgabe erhalten wir das folgende Feld:

Stellen wir uns nun vor, dass wir den Platzhalter formatieren müssen. Dazu müssen wir eine Reihe von Regeln in CSS schreiben:

::-webkit-input-placeholder ( color: #c1c1c1; ) ::-moz-placeholder ( color: #c1c1c1; ) /* Firefox 19+ */ :-moz-placeholder ( color: #c1c1c1; ) /* Firefox 18- */ :-ms-input-placeholder ( Farbe: #c1c1c1; )

Wir bekommen:

Wir können nicht alle Eigenschaften ändern, aber eine Liste der meisten davon, die von modernen Browsern unterstützt werden, finden Sie unten:
Schriftart(auch verwandte Eigenschaften)
Hintergrund(auch verwandte Eigenschaften)
Farbe
Wortabstände
Buchstaben-Abstand
Textdekoration
vertikal ausrichten
Texttransformation
Zeilenhöhe
Texteinzug
Textüberlauf
Opazität

IN verschiedene Browser Die Regel ist anders geschrieben, weil Obwohl es keinen einheitlichen Standard gibt, sind diese Datensätze weiterhin relevant. Im IE-Browser sowie in Firefox unter Version 18 wird Platzhalter als Pseudoklasse und in den neuen Browsern Firefox, Webkit und Blink als Pseudoelement wahrgenommen.

Text im Platzhalter kürzen
Manchmal können Tooltips so lang sein, dass sie nicht vollständig in das Eingabefeld passen. Für diese Zwecke können Sie auch zusätzliche Eigenschaften nutzen, die es Ihnen ermöglichen, den Platzhaltertext im Eingabefeld zu kürzen.

Input ( text-overflow:ellipsis; ) input::-moz-placeholder ( text-overflow:ellipsis; ) input:-moz-placeholder ( text-overflow:ellipsis; ) input:-ms-input-placeholder ( text-overflow :Auslassungspunkte; )

Als Ergebnis erhalten wir ein Eingabefeld mit einem Platzhalter wie diesem:

Text ausblenden, wenn Sie auf ein Feld klicken
Standardmäßig interpretiert jeder Browser die Antwort des Platzhalters unterschiedlich. In einigen Browsern wird es sofort ausgeblendet, wenn Sie auf das Feld klicken, in anderen wird es ausgeblendet, wenn sich mindestens ein Zeichen im Eingabefeld befindet. Lassen Sie den Text verschwinden, wenn Sie auf das Feld klicken. Dies ist in allen Browsern gleich.

:focus::-webkit-input-placeholder ( Farbe: transparent; ) :focus::-moz-placeholder ( Farbe: transparent; ) :focus:-moz-placeholder ( Farbe: transparent; ) :focus:-ms-input -Platzhalter (Farbe: transparent;)

Wir erhalten diese Aktion:

Um die Form zu reduzieren und visuelles Rauschen zu reduzieren, markieren Designer werden durch das Platzhalterattribut ersetzt und erhöhen dadurch die Belastung des Kurzzeitgedächtnisses. Für Menschen mit Sehbehinderungen kann es schwierig sein, den Hinweis zu lesen. Es ist besser zu platzieren direkt über dem Eingabefeld. Ein leeres Feld wird leichter als ein Element erkannt, das ausgefüllt werden muss.

Schlecht

Bußgeld

Styling: CSS-Platzhalterfarbe ändern

Ändern Sie den Eingabefeldstil mit Platzhalter-CSS

Schlecht

Platzhaltereffekt für

Das Platzhalterattribut funktioniert nur für Und , auch wenn für andere Tags das contenteditable-Attribut angegeben ist.</p> <style> .raz { height: 3em; border: 1px solid; } </style> <div contentEditable placeholder="Sie können Text eingeben" class="raz"></div> <style> .raz { height: 3em; border: 1px solid; } .raz:empty:not(:focus)::before { <i>/* хак: если div задать и placeholder , то и.raz:empty:not(:placeholder-shown)::before будет работать */ </i> content: attr(data-placeholder); opacity: .5; } </style> <div contentEditable data-placeholder="Sie können Text eingeben" class="raz"></div> <h2>Eine alte Speichermethode, die den Wert von JavaScript ändert</h2> <input onblur="this.value=(this.value=="onfocus="this.value=(this.value==this.title)?" value="Email" title="Email"> <input onblur="this.value=(this.value=="")?this.title:this.value;" onfocus="this.value=(this.value==this.title)?"":this.value;" value="Email" title="Email" /> <p>Platzhalter ist ein Element eines Eingabefeldes, in dem ein Tooltip platziert werden kann. Wenn der Benutzer mit der Dateneingabe beginnt, verschwindet der unterstützende Text, um ihn nicht zu stören. Jeder Browser hat seine eigene Meinung darüber, wie dieses Element angezeigt werden soll, und manchmal beeinträchtigen Standardstile das gesamte Design. Um sie zu kontrollieren, müssen Sie ein spezielles verwenden <a href="https://128gb.ru/de/oformlenie-spiskov-list-style-pravila-css-dlya-nastroiki-vneshnego-vida-spiska-na-html.html">CSS-Regel</a> Platzhalter</p> <h2>Wo ist der Platzhalter?</h2> <p>Das Problem besteht darin, dass der Tooltip des Eingabefelds fest im Schatten-DOM versteckt ist und nicht so einfach zu erreichen ist. Hierzu wird ein spezieller, nicht standardmäßiger ::Platzhalter verwendet. Mit seiner Hilfe können Sie die Eigenschaften des Tooltips verwalten.</p> <p>Die Gestaltung eines Platzhalters in CSS sieht folgendermaßen aus:</p><p>Input::placeholder ( Farbe: rot; Deckkraft: 1; Schriftstil: kursiv; )</p><p><img src='https://i0.wp.com/fb.ru/misc/i/gallery/39768/2606908.jpg' width="100%" loading=lazy loading=lazy></p> <h2>Browserunterstützung</h2> <p>Das CSS-Platzhalter-Pseudoelement wird von allen modernen Browsern gut verarbeitet. Zur Unterstützung älterer Browser können Sie die folgenden Präfixe verwenden:</p> <ul><li>::-webkit-input-placeholder – für Webkit-Browser (Safari, Chrome, Opera);</li> <li>::-moz-placeholder – für <a href="https://128gb.ru/de/download-software-mozilla-firefox-download-and-install-the-mozilla-firefox-browser-russian-version-on-your-computer.html">Firefox-Browser</a> obige Version 19;</li> <li>:-moz-placeholder – für älteres Firefox;</li> <li>:-ms-input-placeholder – für <a href="https://128gb.ru/de/chto-za-sluzhba-event-monitor-vosstanovlenie-internet-explorer-domashnyuyu-stranicu.html">Internet Explorer</a>über Version 10.</li> </ul><p>Wie Sie sehen, alt <a href="https://128gb.ru/de/ustanovka-plagina-kriptopro-csp-v-brauzere-mozilla-firefox-kripto-pro-ecp.html">Mozilla-Browser</a> sowie IE betrachten Platzhalter als CSS-Pseudoklasse und nicht als Pseudoelement. Lassen Sie uns nicht mit ihnen streiten, wir werden diesen Aspekt nur bei der Gestaltung des Eingabefelds berücksichtigen.</p> <p><img src='https://i2.wp.com/fb.ru/misc/i/gallery/39768/2606909.jpg' width="100%" loading=lazy loading=lazy></p> <h2>Styling-Optionen</h2> <p>Sie können die folgenden Optionen für das Platzhalter-Pseudoelement in CSS festlegen:</p> <ul><li>Hintergrund – die Tooltip-Blockgruppe gilt für das gesamte Eingabefeld. Sie können nicht nur die Farbe (Hintergrundfarbe), sondern auch das Bild (Hintergrundbild) festlegen.</li> <li>Textfarbe - Farbe;</li> <li>Transparenz – Opazität;</li> <li>Unterstreichen, Überstreichen oder Streichen – Textdekoration;</li> <li>case - Texttransformation;</li> <li><a href="https://128gb.ru/de/vnutrennii-otstup-v-tablice-html-primenenie-svoistva-border.html">Polsterung</a>- Polsterung. Nicht von allen Browsern unterstützt. Wie bei Inline-Elementen wird der obere und untere Abstand ignoriert.</li> <li>Schriftartenanzeige – Eigenschaften der Schriftartengruppe, Zeilenhöhe und verschiedene Einzüge (Texteinzug, Buchstabenabstand, Wortabstand);</li> <li>vertikale Ausrichtung in einer Linie - vertikal ausrichten;</li> <li>Text abschneiden, wenn der Container überläuft – Textüberlauf.</li> </ul>.input1::placeholder (Hintergrundbild: linearer Farbverlauf (Limette, Blau); Farbe: Weiß;) .input2::Placeholder (Textdekoration: durchgestrichen; Farbe: lila; Schriftstärke: fett;). input3::placeholder ( Schriftgröße: 16 Pixel; Buchstabenabstand: 10 Pixel; ) .input4:: Placeholder ( Hintergrund: braun; Farbe: weiß; Textüberlauf: Auslassungspunkte; ) <h2>Im Fokus</h2> <p>Standardmäßig verschwindet der Tooltip nur dann aus dem Eingabefeld, wenn mindestens ein Zeichen darin eingegeben wird. Mit Platzhaltern können Sie das Verschwinden jedoch sofort umsetzen, wenn Sie sich auf das Feld konzentrieren. Dazu müssen Sie es mit der Pseudoklasse:focus kombinieren.</p><p>Eingabe:Fokus::Platzhalter (Farbe: transparent;)</p><p>In einigen Browsern ist es möglich, Änderungen in einer Reihe von Platzhaltereigenschaften mithilfe der Transition-Anweisung zu animieren.</p><p>Eingabe::Platzhalter (Farbe: Schwarz; Übergang: Farbe 1s;) Eingabe:Fokus::Platzhalter (Farbe: Weiß;)</p><p>Im Browser <a href="https://128gb.ru/de/chto-oznachaet-verhnii-pravyi-ugol-stranicy-elementy-upravleniya-na-stranice.html">Google Chrome</a> Wenn Sie sich auf ein solches Feld konzentrieren, ändert sich die Farbe des Hinweises innerhalb einer Sekunde sanft.</p> <p>Platzhalter ist ein Element eines Eingabefeldes, in dem ein Tooltip platziert werden kann. Wenn der Benutzer mit der Dateneingabe beginnt, verschwindet der unterstützende Text, um ihn nicht zu stören. Jeder Browser hat seine eigene Meinung darüber, wie dieses Element angezeigt werden soll, und manchmal beeinträchtigen Standardstile das gesamte Design. Um sie zu verwalten, müssen Sie eine spezielle CSS-Platzhalterregel verwenden.</p> <h2>Wo ist der Platzhalter?</h2> <p>Das Problem besteht darin, dass der Tooltip des Eingabefelds fest im Schatten-DOM versteckt ist und nicht so einfach zu erreichen ist. Dazu wird ein spezielles, nicht standardmäßiges CSS::placeholder-Pseudoelement verwendet. Mit seiner Hilfe können Sie die Eigenschaften des Tooltips verwalten.</p> <p>Sie werden interessiert sein:</p> <p><img src='https://i2.wp.com/ruud.ru/wp-content/uploads/2018/06/4f1695522eb38124e423c90938dc189d.jpg' width="100%" loading=lazy loading=lazy></p><p>Die Gestaltung eines Platzhalters in CSS sieht folgendermaßen aus:</p> <p>input::placeholder ( Farbe: rot; Deckkraft: 1; Schriftstil: kursiv; ) <br><img src='https://i0.wp.com/ruud.ru/wp-content/uploads/2018/06/050be174ed3b60dc7c49fe3cd59e15ba.jpg' width="100%" loading=lazy loading=lazy></p><h2>Browserunterstützung</h2> <p>Das CSS-Platzhalter-Pseudoelement wird von allen modernen Browsern gut verarbeitet. Zur Unterstützung älterer Browser können Sie die folgenden Präfixe verwenden:</p> <ul><li>::-webkit-input-placeholder – für Webkit-Browser (Safari, Chrome, Opera);</li> <li>::-moz-placeholder – für Firefox-Browser über Version 19;</li> <li>:-moz-placeholder – für älteres Firefox;</li> <li>:-ms-input-placeholder – für Internet Explorer über Version 10.</li> </ul><p>Wie Sie sehen, betrachten ältere Mozilla-Browser sowie der IE Platzhalter als CSS-Pseudoklasse und nicht als Pseudoelement. Lassen Sie uns nicht mit ihnen streiten, wir werden diesen Aspekt nur bei der Gestaltung des Eingabefelds berücksichtigen.</p> <p><img src='https://i1.wp.com/ruud.ru/wp-content/uploads/2018/06/7563ac2e917a7adb9324bb1d45af7f8e.jpg' width="100%" loading=lazy loading=lazy></p><h2>Styling-Optionen</h2> <p>Sie können die folgenden Optionen für das Platzhalter-Pseudoelement in CSS festlegen:</p> <ul><li>Hintergrund – Gruppe von Hintergrundeigenschaften. Der Hinweisblock-Hintergrund gilt für das gesamte Eingabefeld. Sie können nicht nur die Farbe (Hintergrundfarbe), sondern auch das Bild (Hintergrundbild) festlegen.</li> <li>Textfarbe - Farbe;</li> <li>Transparenz – Opazität;</li> <li>Unterstreichen, Überstreichen oder Streichen – Textdekoration;</li> <li>case - Texttransformation;</li> <li>interne Einzüge - Polsterung. Nicht von allen Browsern unterstützt. Wie bei Inline-Elementen wird der obere und untere Abstand ignoriert.</li> <li>Schriftartenanzeige – Eigenschaften der Schriftartengruppe, Zeilenhöhe und verschiedene Einzüge (Texteinzug, Buchstabenabstand, Wortabstand);</li> <li>vertikale Ausrichtung in einer Linie - vertikal ausrichten;</li> <li>Text abschneiden, wenn der Container überläuft – Textüberlauf.</li> </ul><p>Eingabe1::Platzhalter (Hintergrundbild: linearer Farbverlauf (Limette, Blau); Farbe: Weiß;) .input2::Platzhalter (Textdekoration: durchgestrichen; Farbe: lila; Schriftstärke: fett;) .input3 ::placeholder ( Schriftgröße: 16px; Buchstabenabstand: 10px; ) .input4::placeholder ( Hintergrund: braun; Farbe: weiß; Textüberlauf: Auslassungspunkte; )</p><h2>Im Fokus</h2> <p>Standardmäßig verschwindet der Tooltip nur dann aus dem Eingabefeld, wenn mindestens ein Zeichen darin eingegeben wird. Aber das CSS-Platzhalter-Pseudoelement ermöglicht es Ihnen, das Ausblenden sofort zu implementieren, wenn Sie sich auf das Feld konzentrieren. Dazu müssen Sie es mit der Pseudoklasse:focus kombinieren.</p> <p>input:focus::placeholder ( Farbe: transparent; )</p><p>In einigen Browsern ist es möglich, Änderungen in einer Reihe von Platzhaltereigenschaften mithilfe der Transition-Anweisung zu animieren.</p> <p>Eingabe::Platzhalter (Farbe: Schwarz; Übergang: Farbe 1s;) Eingabe:Fokus::Platzhalter (Farbe: Weiß;)</p><p>IN <a href="https://128gb.ru/de/ustanovochnyi-fail-google-chrome-windows-xp-besplatnaya-ustanovka.html">Google-Browser</a> Wenn Sie sich auf ein solches Feld konzentrieren, ändert sich die Farbe der Chrome-Tooltips innerhalb einer Sekunde.</p> <!-- SAPE RTB JS --> <script async="async" src="https://cdn-rtb.sape.ru/teasers/js/291/2/92291.js" type="text/javascript"> </script> <!-- SAPE RTB END --><br> <br> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy loading=lazy>");</script> </article> <div class="single-share"> <div class="row align-middle"> <div class="columns small-12 medium-expand"> <div class="single-share__title">Freunden erzählen</div> </div> </div> <div class="single-share-links"> <div class="row"> <div class="columns small-6 medium-3"> <a href="#" onClick="window.open('https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2F128gb.ru%2Foformlenie-placeholder-css-kak-izmenit-cvet-teksta-podskazki-v-placeholder-s.html', 'sharer', 'toolbar=0,status=0, width=700, height=400'); return false" title="" class="single-share-links-item single-share-links-item--fb"> <div class="row"> <div class="columns"><i class="fa fa-facebook-official single-share-links-item__icon"></i> </div> <div class="columns text-right js-fb-sharer"><span class="single-share-links-item__text"></span> </div> </div> </a> </div> <div class="columns small-6 medium-3"> <a href="#" onClick="window.open('http://vk.com/share.php?url=https%3A%2F%2F128gb.ru%2Foformlenie-placeholder-css-kak-izmenit-cvet-teksta-podskazki-v-placeholder-s.html', 'sharer', 'toolbar=0,status=0, width=700, height=400'); return false" title="" class="single-share-links-item single-share-links-item--vk"> <div class="row"> <div class="columns"><i class="fa fa-vk single-share-links-item__icon"></i> </div> <div class="columns text-right js-vk-sharer"><span class="single-share-links-item__text"></span> </div> </div> </a> </div> <div class="columns small-6 medium-3"> <a href="#" onClick="window.open('http://twitter.com/share?url=https%3A%2F%2F128gb.ru%2Foformlenie-placeholder-css-kak-izmenit-cvet-teksta-podskazki-v-placeholder-s.html', 'sharer', 'toolbar=0,status=0, width=700, height=400'); return false" title="" class="single-share-links-item single-share-links-item--tw"> <div class="row"> <div class="columns"><i class="fa fa-twitter single-share-links-item__icon"></i> </div> <div id="twitter_sharer" class="columns text-right">Twitter <span class="single-share-links-item__text"></span> </div> </div> </a> </div> <div class="columns small-6 medium-3"> <a href="#" onClick="window.open('https://connect.ok.ru/dk?st.cmd=WidgetSharePreview&st.shareUrl=https%3A%2F%2F128gb.ru%2Foformlenie-placeholder-css-kak-izmenit-cvet-teksta-podskazki-v-placeholder-s.html/&utm_source=share2', 'sharer', 'toolbar=0,status=0, width=700, height=400'); return false" title="" class="single-share-links-item single-share-links-item--ok"> <div class="row"> <div class="columns"><i class="fa fa-odnoklassniki single-share-links-item__icon"></i> </div> <div class="columns text-right js-ok-sharer"><span class="single-share-links-item__text"></span> </div> </div> </a> </div> </div> </div> </div> <div class="banner-place" data-place="article_under_h1" style="width: 100%;"></div> <div class="prev-next-articles"> <div class="prev-next-articles__item prev-next-articles__item--left"> <i class="fa fa-chevron-left"></i><span>"Warum brauchst du...</span> <a href="https://128gb.ru/de/vstroennyi-graficheskii-processor-vstroennye-graficheskie-processory.html" rel="prev">Integrierte GPUs – Alles über das Ein- und Ausstecken eines Prozessors mit leistungsstarkem Grafikkern</a> </div> <div class="prev-next-articles__item prev-next-articles__item--right"> <i class="fa fa-chevron-right"></i><span>Nächster Artikel</span> <a href="https://128gb.ru/de/opisanie-opcii-gigabyte-uefi-dualbios-na-russkom-tonkaya-nastroika-uefi.html" rel="next">Beschreibung der Gigabyte-UEFI-Dualbios-Optionen auf Russisch</a> </div> </div> <div class="banner-place" data-place="article_above_similar_articles" style="width: 100%;"></div> <div class="banner-place" data-place="article_above_similar_articles_2" style="width: 100%;"></div> <div class="banner-place" data-place="article_under_social" style="width: 100%;"></div> <div class="banner-place" data-place="fixed_bottom_right" style="width: 100%;"></div> <div class="read-more"> <div class="read-more__title text-center">Lesen Sie auch</div> <div class="read-more__row"> <div class="row"> <div class="columns small-12 medium-6"> <div class="article-block-small row full noGutter"> <div class="columns shrink"> <div class="article-block-small__img"> <a href="https://128gb.ru/de/zashchita-failov-polzovatelei-s-pomoshchyu-istorii-failov-ispravlyaem-oshibki.html"> <img width="130" height="85" src="/uploads/a594a4802eca848ccb4fb73c24bd61ec.jpg" alt="Wir beheben Fehler bei der Festplattenformatierung und deaktivieren alles, was die Funktion „Dateiversionsverlauf“ beeinträchtigt." / loading=lazy loading=lazy> </a> </div> </div> <div class="columns"> <a class="article-block-small__link" href="https://128gb.ru/de/zashchita-failov-polzovatelei-s-pomoshchyu-istorii-failov-ispravlyaem-oshibki.html">Wir beheben Fehler bei der Festplattenformatierung und deaktivieren alles, was die Funktion „Dateiversionsverlauf“ beeinträchtigt.</a> <div class="article-block-small__author"> <i class="fa fa-user"></i><span>2023-10-19 00:03:17</span> </div> </div> </div> </div> <div class="columns small-12 medium-6"> <div class="article-block-small row full noGutter"> <div class="columns shrink"> <div class="article-block-small__img"> <a href="https://128gb.ru/de/ustanovka-vin-8-1-okonchatelnaya-nastroika-i-ustanovka-prilozhenii.html"> <img width="130" height="85" src="/uploads/faa668f985f6dcacb25930d6c0e877aa.jpg" alt="Endgültige Einrichtung und Installation der Anwendungen" / loading=lazy loading=lazy> </a> </div> </div> <div class="columns"> <a class="article-block-small__link" href="https://128gb.ru/de/ustanovka-vin-8-1-okonchatelnaya-nastroika-i-ustanovka-prilozhenii.html">Endgültige Einrichtung und Installation der Anwendungen</a> <div class="article-block-small__author"> <i class="fa fa-user"></i><span>2023-10-19 00:03:17</span> </div> </div> </div> </div> </div> </div> <div class="read-more__row"> <div class="row"> <div class="columns small-12 medium-6"> <div class="article-block-small row full noGutter"> <div class="columns shrink"> <div class="article-block-small__img"> <a href="https://128gb.ru/de/propal-bloknot-v-windows-7-chto-delat-tekstovyi-redaktor-bloknot.html"> <img width="130" height="85" src="/uploads/57246b6e935faf4891238346b176aed4.jpg" alt="Texteditor „Notepad“" / loading=lazy loading=lazy> </a> </div> </div> <div class="columns"> <a class="article-block-small__link" href="https://128gb.ru/de/propal-bloknot-v-windows-7-chto-delat-tekstovyi-redaktor-bloknot.html">Texteditor „Notepad“</a> <div class="article-block-small__author"> <i class="fa fa-user"></i><span>2023-10-19 00:03:17</span> </div> </div> </div> </div> <div class="columns small-12 medium-6"> <div class="article-block-small row full noGutter"> <div class="columns shrink"> <div class="article-block-small__img"> <a href="https://128gb.ru/de/sekrety-yandeks-disk-kak-ustanovit-voiti-i-polzovatsya-kak-zagruzit.html"> <img width="130" height="85" src="/uploads/8b989058d02eadba216d01f132487eb8.jpg" alt="So laden Sie eine Datei auf Yandex hoch – Schritt-für-Schritt-Anleitung Lokale Festplatte auf 100 geladen" / loading=lazy loading=lazy> </a> </div> </div> <div class="columns"> <a class="article-block-small__link" href="https://128gb.ru/de/sekrety-yandeks-disk-kak-ustanovit-voiti-i-polzovatsya-kak-zagruzit.html">So laden Sie eine Datei auf Yandex hoch – Schritt-für-Schritt-Anleitung Lokale Festplatte auf 100 geladen</a> <div class="article-block-small__author"> <i class="fa fa-user"></i><span>2023-10-19 00:03:17</span> </div> </div> </div> </div> </div> </div> <div class="read-more__row"> <div class="row"> </div> </div> <div class="read-more__row"> <div class="row"> </div> </div> </div> </div> </div> <div class="columns small-12 medium-4 show-for-medium"> <aside class="sidebar"> <div class="experts-list"> <b><div class="experts-list__title">Neueste Veröffentlichungen</div></b><br> <div class="experts-list__item"> <div class="expert row align-middle full noGutter"> <div class="columns small-3 medium-3"> <div class="expert__img"> <img src="/uploads/587e748da0ef135e3df2896384970047.jpg" width="65" height="65" loading=lazy loading=lazy> </div> </div> <div class="columns small-9 medium-9"> <a href="https://128gb.ru/de/rt-g32-ne-rabotaet-wifi-router-asus-versii-rt-g32-opisanie-modeli-ustanovka.html" title="Asus-Router-Version RT-G32: Modellbeschreibung, Installation, Konfiguration" class="expert__name">Asus-Router-Version RT-G32: Modellbeschreibung, Installation, Konfiguration</a> <div class="expert__specialty"> <a class="right-cat-link" href="https://128gb.ru/de/category/the-choice-of-operating-system/">Auswahl eines Betriebssystems</a> </div> <div class="row full noGutter"> <div class="columns shrink"> <div class="expert__rate"> </div> </div> <div class="columns"> <div class="expert__rate"> </div> </div> </div> </div> </div> </div> <div class="experts-list__item"> <div class="expert row align-middle full noGutter"> <div class="columns small-3 medium-3"> <div class="expert__img"> <img src="/uploads/9f486193db3aa252e9d38fd37f2480ba.jpg" width="65" height="65" loading=lazy loading=lazy> </div> </div> <div class="columns small-9 medium-9"> <a href="https://128gb.ru/de/skiny-skiny-krutye-skiny-po-imenam.html" title="Skins Coole Skins mit Namen" class="expert__name">Skins Coole Skins mit Namen</a> <div class="expert__specialty"> <a class="right-cat-link" href="https://128gb.ru/de/category/boot-disk/">Boot-Diskette</a> </div> <div class="row full noGutter"> <div class="columns shrink"> <div class="expert__rate"> </div> </div> <div class="columns"> <div class="expert__rate"> </div> </div> </div> </div> </div> </div> <div class="experts-list__item"> <div class="expert row align-middle full noGutter"> <div class="columns small-3 medium-3"> <div class="expert__img"> <img src="/uploads/f398b1777dfb222505c9144d28bc9432.jpg" width="65" height="65" loading=lazy loading=lazy> </div> </div> <div class="columns small-9 medium-9"> <a href="https://128gb.ru/de/skachat-launcher-s-oruzhiem-i-mashinami-servera-mainkraft-s-modom-na-oruzhie.html" title="Minecraft-Server mit Waffen-Mod" class="expert__name">Minecraft-Server mit Waffen-Mod</a> <div class="expert__specialty"> <a class="right-cat-link" href="https://128gb.ru/de/category/installation-and-configuration/">Installation und Konfiguration</a> </div> <div class="row full noGutter"> <div class="columns shrink"> <div class="expert__rate"> </div> </div> <div class="columns"> <div class="expert__rate"> </div> </div> </div> </div> </div> </div> <div class="experts-list__item"> <div class="expert row align-middle full noGutter"> <div class="columns small-3 medium-3"> <div class="expert__img"> <img src="/uploads/2b2626dd74c8107286cf754ac86b7313.jpg" width="65" height="65" loading=lazy loading=lazy> </div> </div> <div class="columns small-9 medium-9"> <a href="https://128gb.ru/de/mod-flans-voennaya-tehnika-i-oruzhie-v-minecraft-mod-flans-voennaya.html" title="Mod Flans – Militärausrüstung und Waffen in Minecraft Militärausrüstung in Minecraft 1" class="expert__name">Mod Flans – Militärausrüstung und Waffen in Minecraft Militärausrüstung in Minecraft 1</a> <div class="expert__specialty"> <a class="right-cat-link" href="https://128gb.ru/de/category/the-choice-of-operating-system/">Auswahl eines Betriebssystems</a> </div> <div class="row full noGutter"> <div class="columns shrink"> <div class="expert__rate"> </div> </div> <div class="columns"> <div class="expert__rate"> </div> </div> </div> </div> </div> </div> <div class="experts-list__item"> <div class="expert row align-middle full noGutter"> <div class="columns small-3 medium-3"> <div class="expert__img"> <img src="/uploads/165a1d2913e54f3f5ed3e43844212e14.jpg" width="65" height="65" loading=lazy loading=lazy> </div> </div> <div class="columns small-9 medium-9"> <a href="https://128gb.ru/de/mod-jj-skill-skilly-mmorpg-mod-jj-skill-skilly-mmorpg-prokachka-personazha-v.html" title="Mod JJ Skill (MMORPG-Fähigkeiten) Verbessere deinen Charakter in Minecraft 1" class="expert__name">Mod JJ Skill (MMORPG-Fähigkeiten) Verbessere deinen Charakter in Minecraft 1</a> <div class="expert__specialty"> <a class="right-cat-link" href="https://128gb.ru/de/category/installation-and-configuration/">Installation und Konfiguration</a> </div> <div class="row full noGutter"> <div class="columns shrink"> <div class="expert__rate"> </div> </div> <div class="columns"> <div class="expert__rate"> </div> </div> </div> </div> </div> </div> <div class="experts-list__item"> <div class="expert row align-middle full noGutter"> <div class="columns small-3 medium-3"> <div class="expert__img"> <img src="/uploads/459c107da6a92c93c4bf1d6b4fbf933e.jpg" width="65" height="65" loading=lazy loading=lazy> </div> </div> <div class="columns small-9 medium-9"> <a href="https://128gb.ru/de/speedfan-kak-sdelat-kulery-bystrei-kak-nastroit-skorost.html" title="So stellen Sie die Drehzahl von Kühlern (Lüftern) ein" class="expert__name">So stellen Sie die Drehzahl von Kühlern (Lüftern) ein</a> <div class="expert__specialty"> <a class="right-cat-link" href="https://128gb.ru/de/category/work-in-the-system/">Arbeiten im System</a> </div> <div class="row full noGutter"> <div class="columns shrink"> <div class="expert__rate"> </div> </div> <div class="columns"> <div class="expert__rate"> </div> </div> </div> </div> </div> </div> <div class="experts-list__item"> <div class="expert row align-middle full noGutter"> <div class="columns small-3 medium-3"> <div class="expert__img"> <img src="/uploads/ae162dd6b5cbc5cc009814de19923842.jpg" width="65" height="65" loading=lazy loading=lazy> </div> </div> <div class="columns small-9 medium-9"> <a href="https://128gb.ru/de/pochemu-nagrevaetsya-zaryadnoe-ustroistvo-pri-zaryadke-telefona-ili-plansheta.html" title="Das Telefon wird sehr heiß, wenn es gesperrt ist oder während des Ladevorgangs. Ist das normal?" class="expert__name">Das Telefon wird sehr heiß, wenn es gesperrt ist oder während des Ladevorgangs. Ist das normal?</a> <div class="expert__specialty"> <a class="right-cat-link" href="https://128gb.ru/de/category/iron/">Eisen</a> </div> <div class="row full noGutter"> <div class="columns shrink"> <div class="expert__rate"> </div> </div> <div class="columns"> <div class="expert__rate"> </div> </div> </div> </div> </div> </div> <div class="experts-list__item"> <div class="expert row align-middle full noGutter"> <div class="columns small-3 medium-3"> <div class="expert__img"> <img src="/uploads/a1c93fb69c5e1f753d2642442bc46e8d.jpg" width="65" height="65" loading=lazy loading=lazy> </div> </div> <div class="columns small-9 medium-9"> <a href="https://128gb.ru/de/budet-li-rabotat-ssd-bez-ahci-pereklyuchenie-interfeisa-sata-v-rezhim-ahci-na.html" title="Umschalten der SATA-Schnittstelle in den AHCI-Modus auf einem vorhandenen Betriebssystem" class="expert__name">Umschalten der SATA-Schnittstelle in den AHCI-Modus auf einem vorhandenen Betriebssystem</a> <div class="expert__specialty"> <a class="right-cat-link" href="https://128gb.ru/de/category/peripherals/">Peripherie</a> </div> <div class="row full noGutter"> <div class="columns shrink"> <div class="expert__rate"> </div> </div> <div class="columns"> <div class="expert__rate"> </div> </div> </div> </div> </div> </div> <div class="experts-list__item"> <div class="expert row align-middle full noGutter"> <div class="columns small-3 medium-3"> <div class="expert__img"> <img src="/uploads/355908a42b70e66f06347f7e4ca1de5a.jpg" width="65" height="65" loading=lazy loading=lazy> </div> </div> <div class="columns small-9 medium-9"> <a href="https://128gb.ru/de/kak-nabrat-podpischikov-na-yutube-estestvennymi-sposobami-kak.html" title="So gewinnen Sie Abonnenten auf YouTube: Ich teile kostenpflichtige und kostenlose Methoden, wie berühmte YouTube-Blogger Abonnenten gewinnen" class="expert__name">So gewinnen Sie Abonnenten auf YouTube: Ich teile kostenpflichtige und kostenlose Methoden, wie berühmte YouTube-Blogger Abonnenten gewinnen</a> <div class="expert__specialty"> <a class="right-cat-link" href="https://128gb.ru/de/category/protection/">Schutz</a> </div> <div class="row full noGutter"> <div class="columns shrink"> <div class="expert__rate"> </div> </div> <div class="columns"> <div class="expert__rate"> </div> </div> </div> </div> </div> </div> <div class="experts-list__item"> <div class="expert row align-middle full noGutter"> <div class="columns small-3 medium-3"> <div class="expert__img"> <img src="/uploads/3156cce9d3f24151733f585da61c9ec5.jpg" width="65" height="65" loading=lazy loading=lazy> </div> </div> <div class="columns small-9 medium-9"> <a href="https://128gb.ru/de/vsp-group-partnerka-oficialnyi-partnerka-yutub-yoola-vsp-group-podklyuchenie-k-partnerke.html" title="YouTube-Tochter Yoola VSP Group" class="expert__name">YouTube-Tochter Yoola VSP Group</a> <div class="expert__specialty"> <a class="right-cat-link" href="https://128gb.ru/de/category/boot-disk/">Boot-Diskette</a> </div> <div class="row full noGutter"> <div class="columns shrink"> <div class="expert__rate"> </div> </div> <div class="columns"> <div class="expert__rate"> </div> </div> </div> </div> </div> </div> </div> <div> <div id="komojy1" style="height:500px;width:300px;" align="center"></div> </div> </aside> </div> </div> </main> </div> </div> </div> <footer class="footer"> <div class="footer-menu"> <a href="https://128gb.ru/de/feedback.html" title="" class="footer-menu__item">Kontakte</a> <a href="" title="" class="footer-menu__item">über das Projekt</a> <a href="https://128gb.ru/de/feedback.html" title="" class="footer-menu__item">Werbung</a> </div> <div class="footer-bottom"> <div class="footer-bottom__wrapper"> <div class="footer-bottom__block"> <div class="footer__logo"> </div> <div class="footer__copyright" style="max-width:500px;">© 2023. Computerhilfe <br> <small></small> </div> </div> <div class="footer-submenu"> <div class="footer-submenu__column"> <a class="footer-submenu__item" data-key="aHR0cDovL3NvdmV0cy5uZXQvYWJvdXQ=" data-type="href" href="https://128gb.ru/de/category/useful-tips/">Hilfreiche Ratschläge</a> </div> <div class="footer-submenu__column"> <a class="footer-submenu__item" data-key="aHR0cDovL3NvdmV0cy5uZXQvYWJvdXQ=" data-type="href" href="https://128gb.ru/de/category/solving-problems/">Probleme lösen</a> </div> <div class="footer-submenu__column"> <a class="footer-submenu__item" data-key="aHR0cDovL3NvdmV0cy5uZXQvYWJvdXQ=" data-type="href" href="https://128gb.ru/de/category/iron/">Eisen</a> </div> <div class="footer-submenu__column"> </div> </div> <div class="footer-social"> </div> </div> </div> </footer> <script type="text/javascript" src="//vk.com/js/api/openapi.js?124"></script> <script> var BANNERS = { types: { code: 1, consultant: 6, modal: 9, offer: 7 } } </script> <script type="text/javascript" src="https://128gb.ru/wp-content/themes/womensovet/assets/js/app-20170207142519.js"> </script> <script type="text/javascript"> /*<![CDATA[*/ window.hashName = window.location.hash; if (window.hashName) { $(window).load(function () { $('html, body').animate({ scrollTop: $(window.hashName).offset().top} , 2000); return false; } ); } jQuery(function($) { $(document).foundation(); APP.init(); getVkSharedCount(); getFaceBookShareCount(); getOKShareCount(); } ); /*]]>*/ </script> <script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=4.8.3'></script> <div class="li-stat"> </div> <!-- SAPE RTB JS --> <script async="async" src="https://cdn-rtb.sape.ru/teasers/js/291/2/92291.js" type="text/javascript"> </script> <!-- SAPE RTB END --><br> <br> </body> </html>