Html CSS Suchleiste, hilfe?

Der Code unten ist eine Suchleiste die sich erweitert wenn man auf das search icon klickt,

das Problem ist das dann kein hellgrauer text in dem input feld steht bevor man was getippt hat.

wie zum beispiel auf gutefrage.net "Suche nach Fragen,Themen und Nutzern" und wenn man was eintippt verschwindet es.

Kann das jemand hinzufügen sodass es auch einen text im input hat,

wenn ihr Hallo oder sowas da reinschreibt seh ich schon wo ich das selber machen.

<!-- Expandable Textfield -->
<form action="#">
  <div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable">
    <label class="mdl-button mdl-js-button mdl-button--icon" for="sample6">
      <i class="material-icons">search</i>
    </label>
    <div class="mdl-textfield__expandable-holder">
      <input class="mdl-textfield__input" type="text" id="sample6">
      <label class="mdl-textfield__label" for="sample-expandable">Expandable Input</label>
    </div>
  </div>
</form>

1 Antwort

Von Experte MrAmazing2 bestätigt

ChrisCat1, UserMod Light

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer

25.07.2021, 17:10

Solche Texte kann man mit dem Attribut placeholder hinzufügen.
https://www.w3schools.com/tags/att_input_placeholder.asp
https://www.w3schools.com/tags/tag_input.asp

<input type="text" placeholder="Suche nach Fragen, Themen und Nutzern…">

lllkrlrkewkrewr

Fragesteller

25.07.2021, 18:02

Danke, hab erst nach 10 minuten ausprobieren verstanden was du gemeint hast xD

                     <!-- Expandable Textfield -->
              <form action="#">
                <div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable">
                  <label class="mdl-button mdl-js-button mdl-button--icon" for="sample6">
                    <i class="material-icons">search</i>
                  </label>
                  <div class="mdl-textfield__expandable-holder">
                    <input class="mdl-textfield__input" type="text" placeholder="HALLO" place id="sample6">
                    <label class="mdl-textfield__label" for="sample-expandable">Expandable Input</label>
                  </div>
                </div>
              </form>

Guten Tag,

ich baue momentan ein Suchfeld (input type search) in eine Testseite ein. Ich sehe gerade, dass das Inputfeld vom type Search mit einem integrierten Lupensymbol daherkommt. Die default Farbe ist zwar passend für den Lightmode meiner Seite, im Darkmode ist sie allerdings nicht mehr zu sehen. Daher meine Frage: Gibt es eine Art Pseudoklasse in CSS für diese, um diese umzustylen?

Vielen Dank im Voraus! :)

...zur Frage

Plausibilitätsprüfung als jQuery Code?

Benötige für eine Ausgabe eine Plausibilitätsprüfung als jQuery Code um ein Alter zu überprüfen, bzw. einzutippen: Unter Geburtsdatum tippen man das Datum ein, und bei Jahr_Einrichtung soll man ein Alter (Zahl) eintippen, die zum Datum übereinstimmt.

Das heißt, wenn man ein Datum 23.06.2020 eintippt, kann man nur Zahlen von 1 bis 3 eintippen, ansonsten kommt es zu eine Fehlermeldung

<label for="Geburtsdatum"style="width:165px;">Geburtsdatum</label>
<input type="text" class="form-control" style="width: 129px;" style="max-width: 130px;" id="Geburtsdatum" name="Geburtsdatum" value="{if $pdf}{$values.Geburtsdatum}{/if}">
                                                    
                                                              
<label for="Jahr_Einrichtung" style="width: 120px;">Das Kind besucht seit</label>
input type="text" class="form-control" maxlength="2" style="width: 30px;"  name="Jahr_Einrichtung" value="{if $pdf}{$values.Jahr_Einrichtung}{/if}">

...zur Frage

Was sagt ihr zu dem anfangsprojekt?

Mein Ziel ist es mit html und CSS eine stabile Test Seite zu erstellen (Später kommt Js dazu) um dann eine richtige Seite zu bauen

html:

<!DOCTYPE html>

<head>

<title>Document</title>

<a href="#"><i class="fa fa-fw fa-search"></i> Search</a>

<a href="#"><i class="fa fa-fw fa-envelope"></i> Contact</a>

<a href="#"><i class="fa fa-fw fa-user"></i> Login</a>

</div>

</head>

<body>

</Header>

<main>

<h2>Anmeldung</h2>

<h3>Login</h3>

</form>

</div>

<hr>

<a href="#">Impressum</a>

<a href="#">kontakt</a>

</main>

</footer>

</body>

</html>

css:

body {

font-family: Arial, Helvetica, sans-serif;

color: white;

}

body{

background-color: white;

}

.input {

display: flex;

margin: 150px;

margin-top: 3000px;

flex-direction: column;

justify-content: center;

align-items: center;

box-shadow: 1px 1px 3px 3px black;

border-radius: 30px;

height: 30px;

width: 100px;

padding: 100px;

}

h3{

color: black ;

}

)

font-family: Arial, Helvetica, sans-serif;

display: flex;

justify-content: center;

align-items: center;

}

a:hover{

color: green;

text-decoration-line: none;

}

input{

padding: 5px;

border-radius: 10px;

}

input[type="submit"] {

font-size: 1.0em; padding: 1px 6px;

font-family: Roboto, sans-serif;

font-weight: 100;

color: teal;

border: 1px solid silver;

border-radius: 20px;

}

input[type="reset"] {

font-size: 1.0em; padding: 1px 6px;

font-family: Roboto, sans-serif;

font-weight: 100;

color: teal;

border: 1px solid silver;

border-radius: 20px;

}

#main {margin: 0 auto; width: 25%;}

.input {margin: 0 auto; width: 25%;}

input:hover {

color: blue;

}

/* Style the navigation bar */

.navbar {

width: 100%;

background-color: #555;

overflow: auto;

}

/* Navbar links */

.navbar a {

float: left;

text-align: center;

padding: 12px;

color: white;

text-decoration: none;

font-size: 17px;

}

/* Navbar links on mouse-over */

.navbar a:hover {

background-color: #000;

}

/* Current/active navbar link */

.active {

background-color: #04AA6D;

}

/* Add responsiveness - will automatically display the navbar vertically instead of horizontally on screens less than 500 pixels */

@media screen and (max-width: 500px) {

.navbar a {

float: none;

display: block;

}

...zur Frage

Css background-image kleiner machen?

Wie kann ich bei css ein backrgound image kleiner machen?

...zur Frage

PHP: bestimmte Wörter in String hervorheben?

ich möchte in PHP bestimmte Wörter aus einem Text hervorheben. bis jetzt habe ich das hinbekommen :

$searchStr = 'WoRt1 wort2 WORT3';
$search = explode(' ', $searchStr);
$replace = array_map(fn($str) => "<u>$str</u>", $search);

$input = 'Dies ist wort1 ein Beispiel wort2 Text! bla wort3 bla bla Bla.';
$output = str_ireplace($search, $replace, $input);

echo $output;

Die wörter in $searchStr können aber unterschiedlich von der Groß und Kleinschreibung sein. "Problem" ist jetzt aber dass in $output diese groß- und Kleinschreibung ausgegeben wird, und nicht die originale aus $input. also erhalte ich "Dies ist WoRt1..." anstatt "Dies ist wort1...".

Wie bekomme ich das hin dass die unterstrichenen Wörter original aus $input verwendet werden ?

...zur Frage

Text auf Bild in HTML einfügen?

Ich möchte in HTML oder auch CSS, dass es so aussieht:

Wie man erkennen kann Ein Bild mit einem Text drauf

...zur Frage

Habt ihr ein Paar Ideen für den Girls Day (Informatik)?

Hallo, ich bin Azubi für Fachinformatiker Systemintegration und plane einen Teil des Girls Days in meinem Betrieb.

Ich mache den Software-Teil (der Hardware-Teil macht jemand anders, dort bauen die alte Rechner auseinender)

Meine Idee war was kleines zu programmieren, z.B. ne kleine MessageBox mit denen ihren Namen oder in HTML/CSS so was animiertes. Natürlich mit Hilfe, die würden dann nur einen ganz kleinen Teil machen, wo man keine Vorkenntnisse braucht.

Die Mädchen sind so zw. 10-16 Jahre.

Was meint ihr? Habi ihr noch Ideen?

...zur Frage

Telegram Gruppe für Informationen über DoS Angriffe?

Hallo kennt jemand eine gute Telegram Gruppe über DoS Angriffe, auf der man Informationen sammeln kann?

Ich will sowas nicht machen ich brauche nur Informationen für die Schule weil ich dort eine wissenschaftliche Arbeit darüber schreibe.

...zur Frage

Warum klickt der Webdriver auf ein anderes Element?

Hallo,

heute mal wieder die KrünKraft Website:

Mein Python Selenium Skript soll auf folgender Seite: GrünKraft Zufriedenheit (gruenkraft-zufriedenheit.de) den Button PayPal-Konto drücken. Danach sollte sich dann ein input Feld auftun, welches dann ausgefüllt werden soll.

<div class="column-left w-col w-col-5">
<label class="radio-button-field-2 left w-radio">
<input type="radio" id="paypal" name="payout" value="paypal" data-name="payout" required="" class="w-form-formradioinput radio-button w-radio-input">
<span for="paypal" class="radio-button-label-2 w-form-label">PayPal-Konto</span>
</label>
</div>

Den Code für das Inputfeld lasse ich jetzt mal weg, da es wirklich nur ein Input Feld ist.

Mein erster Code:

from selenium import webdriver
import time
driver = webdriver.Chrome('C:/Users/.../Desktop/Python/chromedriver.exe')
driver.maximize_window()
driver.get('https://gruenkraft-zufriedenheit.de/')
element = driver.find_element_by_id("paypal")
time.sleep(4)
element.click()

Wenn ich den Code der Website richtig verstanden habe, dann muss man doch zuerst auf den gestylten Radiobutton drücken, damit das Inputfeld erscheint. Führe ich dann aber den oben gezeigten Code aus, dann kommt die Meldung: "Other element would receive the click" und zwar anscheinend das Textfeld darunter. Warum ist das so?

Ein Code der funktioniert ist folgender:

from selenium import webdriver
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.common.by import By
from selenium.webdriver.support import expected_conditions as EC
from selenium.webdriver.common.action_chains import ActionChains


driver = webdriver.Chrome()
driver.maximize_window()
driver.implicitly_wait(30)
driver.get("https://gruenkraft-zufriedenheit.de/")
wait = WebDriverWait(driver, 10)
driver.find_element_by_xpath("//span[text()='PayPal-Konto']").click()
wait.until(EC.visibility_of_element_located((By.CSS_SELECTOR, "input[name='paypal-email-2']"))).send_keys('some-email@gmail.com')

Da wird gewartet, bis das Element sichtbar wird( Was heiß das dann schon wieder? ) und offensichtlich wird nicht der Radiobutton, sondern das span Element angeklickt. Warum funktioniert das dann?

Danke

...zur Frage

Gutes Buch zu JavaScript für schon etwas Fortgeschrittene?

Ich suche eins das nicht nur über 300 seiten die Grundlagen erklärt, also ich hab schon etwas erfahrung mit JavaScript, ich brauch jetzt nicht variablen lernen aber auch keins das zu tief in die Materie eintaucht sodass ich da garnicht mitkomme.

Sollte „mittel“ sein und nicht 80€ kosten.

vielleicht so 20€ Und ein gutes buch sein.

...zur Frage

Javascript Bilder per Knopf austauschen?

Ich will in meiner Website ein Bild einfügen, welches man per Knopfdruck austauschen kann. Ich habe den Code von dieser Website benutzt http://droeppez.de/download/js-tut/js-tut/tutorial/bilder1.html).

Auf meiner Website ist oben links ein Bild mit dem Logo und weiter unten das Bild was ausgetauscht werden soll. Will ich jetzt das Bild ändern, ändert sich das Logo oben in der Ecke und nicht das Bild was sich eigentlich ändern soll. Die Knöpfe funktionieren aber.

Meine Frage ist nun kann man das Bild was sich eigentlich ändern soll, irgendwie auswählen, damit sich nur das bestimmte Bild ändert?

ps. Bin noch neu und kenn mich nicht so gut aus.

...zur Frage

Undisabled eines Buttons durch JavaScript?

Hallo,

ich möchte mit Hilfe von JavaScript einen Button, der vorher disabled war, wieder aktiviert, sodass er undisabled ist. Die funktioniert leider nicht und ich habe kein Ahnung an was es liegen könnte.

Mein HTML Code:

<body>

</body>

}

Mein Javascript Code:

let button = document.getElementbyid('button' );

function Test() {

button.disabled = false;

}

Weiß jemand an was es liegen könnte?

...zur Frage

WetterApp mit HTML, Css und C# über Blazor Server App?

Hallo undzwar bin ich neu in C# und möchte über die Blazor Server App eine Wetter-App programmieren, allerdings fehlt mir dazu noch der Code, da ich nicht weiß wie ich anfangen soll. Ich möchte dass mein "SearchIcon" welcher in HTML hinterlegt ist als suchbutton fungiert, damit ich die Städte suchen kann und über API möchte ich, dass mir dann die jeweiligen Temperaturen angegeben werden. Kann mir wer helfen und gegebenenfalls einen Code dafür geben.

Hier mein HTML code:

</div>

</div>

<div>

</div>

</div>

<img src="/images/image1.png" width="75" height="75" class="imageline "

<img src="/images/image1.png" width="75" height="75" class="imageline " style="margin-left: 5px; margin-right: -5px;"

<img src="/images/image1.png" width="75" height="75" class="imageline " style="margin-left: 22px; margin-right: -5px;"

<img src="/images/image1.png" width="75" height="75" class="imageline " style="margin-left: 5px; margin-right: -14px;"

</div>

<div>

<p style="color:black;"class="line0 title margin-left ">Monday</p>

<p style="color:black;"class="line0 title margin-left ">Tuesday</p>

<p style="color:black;"class="line0 title margin-left ">Wednesday</p>

<p style="color:black;"class="line0 title margin-left ">Thursday</p>

<p style="color: black;"class="line0 title margin-left ">Friday</p>

</div>

<div>

<p class="speed">Humidity</p>

</div>

<div>

<p class="speed">Wind Speed</p>

</div>

</body>

hier mein Css code:

.backgroundimage {

background-attachment: fixed;

background-repeat: no-repeat;

background-size: cover;

}

.cloud-background {

/* Füge hier die gewünschten Hintergrundbilderigenschaften hinzu */

}

.card {

width: 90%;

max-width: 470px;

color: #fff;

margin: 10px auto 0;

border-radius: 20px;

}

.search{

width: 100%;

display: flex;

align-items: center;

justify-content: space-between;

}

.search input{

border: 0;

outline: 0;

background: #ebfffc;

color: #555;

padding: 10px 25px;

height: 60px;

border-radius: 30px;

flex: 1;

margin-right: 16px;

font-size: 18px;

}

.search button{

border: 0;

outline: 0;

background: #ebfffc;

border-radius: 60%;

width: 60px;

height: 60px;

cursor: pointer;

}

.weather-icon{

margin-bottom: -30px;

}

.weather h1 {

font-size: 80px;

font-weight: 500;

color: floralwhite;

}

.weather h2 {

font-size: 40px;

font-weight: 400;

margin-top: -10px;

color: floralwhite;

}

.details {

display: flex;

align-items: center;

justify-content: space-between;

padding: 0 20px;

margin-top: 50px;

}

.col {

display: flex;

align-items: center;

text-align: left;

margin-top: 150px;

}

.col img {

width: 20px;

margin-right: 20px;

margin-bottom: 70px

}

.humidity, .wind{

font-size: 28px;

margin-top: -6px;

color: floralwhite;

}

.speed{

font-weight: bold;

}

.temp {

margin-bottom: 20px;

display: flex;

justify-content: center;

}

.search button img{

width: 55%;

}

.center {

display: flex;

justify-content: center;

}

.top-left{

display: flex;

justify-content:left

}

.top-left

{

margin-left: 10px;

}

.margin-top{

margin-top: 20px;

}

.hr1 {

width: 390px;

height: 2px;

color: black;

}

.line{

margin-bottom: -100px;

margin-top: 10px;

}

.line1{

margin-top: 30px;

margin-bottom: -20px;

}

.line0{

margin-top: 70px;

margin-bottom: -90px;

font-size: 14px;

font-weight: bold;

color: black;

}

.imageline {

margin-top: 5px;

margin-bottom: -90px;

}

.imagesMain {

padding: 0;

margin-left: auto;

margin-right: auto;

margin-top: 20px;

text-align: center;

}

.imagesMain img {

height: 400px;

width: 300px;

vertical-align: middle;

}

.title {

display: inline-block;

color: lightgray;

}

.margin-left{

margin-left: 14px;

}

...zur Frage

Javascript nach Button Klick auf andere Webseite leiten?

Moin!

Ich hab folgende Frage: Wie kann ich es realisieren, dass, wenn ich auf den Success Button klicke, ich dann auf eine andere Seite geleitet werde? Der Link dahin ist auch ein Teil dynamischer PHP Code. Ihr werdet es sehen :)

Hier mein Code:

"use strict";!function(){const n=document.querySelector(".suspend-user"),t=(n&&(n.onclick=function(){Swal.fire({title:"Bist du sicher?",text:"Du kannst diesen Benutzer nicht wiederherstellen!",icon:"warning",showCancelButton:!0,confirmButtonText:"Fortsetzen",cancelButtonText:"Abbrechen",customClass:{confirmButton:"btn btn-primary me-2",cancelButton:"btn btn-label-secondary", text:"Abrechen"},buttonsStyling:!1}).then(function(n){n.value?Swal.fire({icon:"success",title:"Benutzer gelöscht!",text:"Der Benutzer wurde gelöscht.",customClass:{confirmButton:"btn btn-success"}}):n.dismiss===Swal.DismissReason.cancel&&Swal.fire({title:"Vorgang abgebrochen",text:"Der Benutzer wurde nicht gelöscht.",icon:"error",customClass:{confirmButton:"btn btn-success"}})})}),document.querySelectorAll(".cancel-subscription"));t&&t.forEach(n=>{n.onclick=function(){Swal.fire({text:"Are you sure you would like to cancel your subscription?",icon:"warning",showCancelButton:!0,confirmButtonText:"Yes",customClass:{confirmButton:"btn btn-primary me-2",cancelButton:"btn btn-label-secondary"},buttonsStyling:!1}).then(function(n){n.value?Swal.fire({icon:"success",title:"Unsubscribed!",text:"Your subscription cancelled successfully.",customClass:{confirmButton:"btn btn-success"}}):n.dismiss===Swal.DismissReason.cancel&&Swal.fire({title:"Cancelled",text:"Unsubscription Cancelled!!",icon:"error",customClass:{confirmButton:"btn btn-success"}})})}})}();

Und ich möchte gern auf folgende Seite weitergeleitet werden:

index.php?page=deleteUser&&delete_id=<?=$user_data['user_id']?>

Könntet ihr mir hier behilflich sein? Wenn ich auf den Button "Fortsetzen" klicke erscheint noch eine Bestätigungsnachricht, wenn man dann auf "OK" klickt, soll der Redirect ausgeführt werden.

Danke euch im Vorraus!

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen