HTML/CSS: Schriftfarbe im Kontaktformular ändern?

Bin Anfänger. Ich betreibe eine Website mit WordPress und nutze das Plugin "Contact Form 7". Das Forumular was ich erstellt habe besitzt mehrere Container. Einer davon ist ein Drop-Down Menü. Sieh so aus:

Bild zum Beitrag

Ihr seht: Schriftfarbe und Background Color sind beide weiß. Ich möchte, dass die Schriftfarbe schwarz wird.

<div class="column one">[select* Der-Grund include_blank "Ein Problem melden" "Frage" "Feedback" "Sonstiges"]</div>

Was muss ich nun machen? Wo kann ich das Attribut font-color korrekt hinzufügen? Ich verstehe ehrlich gesagt noch nicht, was genau [select usw jetzt ist. Ist das HTML?

Hier ist eine Hilfeseite, wo das Wort "color" aber nicht auftaucht:

https://contactform7.com/checkboxes-radio-buttons-and-menus/#select

2 Antworten

SeefayNal

17.11.2021, 15:42

Ich bin eigentlich auch ein ziemlicher Anfänger, aber könntest du nicht einfach die Klasse des div's ansprechen?

Also im stylesheet:

.column one {

color: black;

}

so theoretisch. Weiss aber nicht ob das geht.

Woher ich das weiß:Berufserfahrung

EinAlexander

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, HTML, Webseite

10.01.2021, 13:58

Wo kann ich das Attribut font-color korrekt hinzufügen

Nirgendwo. Das Attribut font-color gibt es nicht. Schreib ins CSS

option { color: black }

Alex

trolltheworld

Beitragsersteller

10.01.2021, 13:59

Das alleine wird doch nicht reichen?! Ich brauche eig. nur ein Attribut was ich direkt in den HTML Code schreiben kann. Oder geht hierbei überhaupt nicht?

EinAlexander

10.01.2021, 14:00

@trolltheworld

Das alleine wird doch nicht reichen?!

Probier's aus.

trolltheworld

Beitragsersteller

10.01.2021, 14:05

@EinAlexander

Hä, das funktioniert ja echt. DANKE!

Aber jetzt möchte ich das natürlich auch verstehen. Worauf genau bezieht sich das Attribut "option" ?

EinAlexander

10.01.2021, 14:14

@trolltheworld

Worauf genau bezieht sich das Attribut "option" ?

option ist kein Attribut sondern ein HTML Element. Und durch die oben gepostete CSS Regel legst Du fest, dass der Inhalt aller HTML Elemente <option> in schwarz geschrieben werden soll.

trolltheworld

Beitragsersteller

10.01.2021, 15:29

@EinAlexander

Das heißt aber es gibt noch andere HTML Elemente, die ich damit jetzt geändert habe, richtig?

EinAlexander

10.01.2021, 15:31

@trolltheworld

Das heißt aber es gibt noch andere HTML Elemente, die ich damit jetzt geändert habe, richtig?

Nein. Mit dem genannten Code hast Du nur die Schriftfarbe aller <option> Elemente geändert. Sonst nichts.

Ähnliche Beiträge

CSS: Wie kann ich bei Hover die Hintergrund- und Schriftfarbe ändern lassen?

Hallo zusammen,

ich würde gerne in diesen Code eine Hover-Funktion einbauen. Da ich Neuling bin, hoffe ich, dass ihr mir die Unbeholfenheit verzeiht.

Bei Hover sollte sich die Hintergrundfarbe und wenn möglich die Schriftfarbe ändern:

*#dm *.dmBody div.u_1159973834 {
  background-color: rgba(255, 255, 255, 0.35) !important;
  border-style: solid !important;
  border-width: 2px !important;
  border-color: rgba(255, 255, 255, 1) !important;
}

Besten Dank für eure Zeit!

...zum Beitrag

HTML gradient in nav bar?

Hallo, ich versuche vergebens eine nav bar zu bauen, welche durch hovern einen gradient freigibt, nicht hinter jedem linkblock soll ein gradient sein, sondern ein 'grosser' hinter allen zsm. Mein ansatz ist bis jetzt dies:

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>G&M Barber</title>
  </head>
  <body>
   
        <ul>
            <li><a href="barber.html">Home</a></li>
            <li><a href="barber.html">News</a></li>
            <li><a href="barber.html">Contact</a></li>
            <li><a href="barber.html">About</a></li>
            
        </ul> 
    
</body>
</html>

css:

body {
    background-color: black;
  }
  
  ul {
  background: linear-gradient(90deg, rgba(0, 3, 36, 1) 0%, rgba(121, 9, 118, 1) 47%, rgba(56, 134, 188, 1) 100%);    border-radius: 12px;
    overflow: hidden;
    display: table;
    margin: 0 auto;
    padding: 0;
  }
  
  li {
    display: inline-block;
  }
  
  li a {
    display: block;
    color: rgb(255, 255, 255);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    background: black;
  }
  
  li a:hover {
    background: transparent;
  }

jedoch sind die Abstände zwischen den li 'boxen' auch gefärbt, wie ändere ich das, oder wie gehe ich das schlauer an?

Vielen Dank schon mal

...zum Beitrag

html: wie button zentrieren und farbe ändern?

hallo, wie kann ich in html einen button, den ich wie folgt gemacht habe, zentrieren und die farbe ändern.

html:<a href="https://wakeuprecords.zohobookings.eu/#/wakeuprecords">
<button>Buche deine Session hier</button>
</a>
css:.button {
text-align: center;
}
button {
font-size: 20px;
background-color: yellow;
cursor: pointer;
color: green;
}

hab ich irgendwo einen fehler oder muss man das anders machen, den bei mir ändert sich gar nichts.

...zum Beitrag

Switch/Checkbox Funktion geben?

Ich habe in HTML und CSS eine Checkbox inform eines Solider erstellt. Jetzt möchte ich das wenn der Spider auf "An" ist, das z.B. sich Schriftfarbe ändern.

...zum Beitrag

HTML projekt wie findet ihr die vorarbeit?

html:

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<Header>
</Header>
<div class="input">
<main>
<form action="" method="post">
<h2>Anmeldung</h2>
<input type="email" name="Email" placeholder="Email hier eingeben" required="@" id=""> <br>
<input type="text" name="Benutzer" placeholder="Benutzer hier eingeben" required="A-z" > <br>
<input type="password" name="passwort" placeholder="password hier eingeben " id=""> <br>
<input type="submit" value="Anmelden">
<input type="reset" value="reset">
</form>
</div>
<hr>
<a href="#">Impressum</a>
<a href="#">kontakt</a>
<a href="#">Über uns</a>
</main>
<footer>
</footer>
</body>
</html>

css

body {
font-family: Arial, Helvetica, sans-serif;
color: white;
}
body{
background-color: black;
}
.input {
display: flex;
margin: 700px;
margin-top: 300px;
flex-direction: column;
justify-content: center;
align-items: center;
box-shadow: 1px 1px 3px 3px white;
border-radius: 30px;
height: 300px;
width: 300px;
}
a{
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;
background-image: linear-gradient(to top, gainsboro 0%, white 90%);
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;
background-image: linear-gradient(to top, gainsboro 0%, white 90%);
border-radius: 20px;
}

...zum Beitrag

JavaScript - Erste Schritte, CSS wird blockiert?

Ich bekomme folgenden Error, wenn ich versuche meine ersten Versuche einer Webseite in Firefox zu laden.

Die Ressource von "http://localhost:63342/FirstTest/style.css" wurde wegen eines MIME-Typ-Konfliktes ("text/html") blockiert (X-Content-Type-Options: nosniff)

Das ist der Code von den Datein.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Title</title>
    <link rel="stylesheet"href="style.css">
</head>
<body>
    <div class="placeholder">
        I'm in a div!
    </div>
    <div class="anotherClass">
        I'm in another class!
    </div>
</body>
</html>

CSS

.placeholder{
    background-color: red;
}

.anotherClass{
    background-color: lightseagreen;
}

Leider werden nur die div Elemente ausgeben, woran kann es legen? Ich werde aus der Fehlermeldung nicht schlau.

Schöne Grüße

...zum Beitrag

CSS Buttons verschieben?

Hallo, ich möchte auf meiner Website, dass die Buttons untereinander und nicht nebeneinander angezeigt werden wie hier:

habe schon einiges probiert aber nichts funktioniert richtig...

mein html Code ist das hier:

<!DOCTYPE html>
<html lang="de">
<head>
    <link href="style_bypass.css" rel="stylesheet">
    <title>Bypass</title>
</head>
<body id="links">


<a href=""><button style="--color:#00ccff;--border:2px;--slant:.5em">Set Lockscreen</button></a>
<a href=""><button style="--color:#00ccff;--border:2px;--slant:.5em">Einstellungen</button></a>
<a href=""><button style="--color:#00ccff;--border:2px;--slant:.5em">Test Video</button></a>
<a href=""><button style="--color:#00ccff;--border:2px;--slant:.5em">Galaxy Store</button></a>
<a href=""><button style="--color:#00ccff;--border:2px;--slant:.5em">Google Quick Search</button></a>
<a href=""><button style="--color:#00ccff;--border:2px;--slant:.5em">Youtube</button></a>



</body>

Und mein CSS Code der hier:

button {
    --border: 5px;    /* the border width */
    --slant: 0.7em;   /* control the slanted corners */
    --color: #37E8FC; /* the color */
    
    font-size: 35px;
    padding: 0.4em 1.2em;
    border: none;
    cursor: pointer;
    font-weight: bold;
    color: var(--color);
    background: 
       linear-gradient(to bottom left,var(--color)  50%,#0000 50.1%) top right,
       linear-gradient(to top   right,var(--color)  50%,#0000 50.1%) bottom left;
    background-size: calc(var(--slant) + 1.3*var(--border)) calc(var(--slant) + 1.3*var(--border));
    background-repeat: no-repeat;
    box-shadow:
      0 0 0 200px inset var(--s,#0000),
      0 0 0 var(--border) inset var(--color);
    clip-path: 
        polygon(0 0, calc(100% - var(--slant)) 0, 100% var(--slant),
                100% 100%, var(--slant) 100%,0 calc(100% - var(--slant))
               );
    transition: color var(--t,0.3s), background-size 0.3s;
  }
  button:hover,
  button:active{
    background-size: 100% 100%;
    color: #fff;
    --t: 0.2s 0.1s;
  }
  button:focus-visible {
    outline-offset: calc(-1*var(--border));
    outline: var(--border) solid #000a;
  }
  button:active {
    --s: #0005;
    transition: none;
  }
  
  
  
  body#links {
    display:grid;
    grid-auto-flow:column;
    grid-gap:px;
    place-content:center;
    margin:0;
    height:100vh;
    background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
  }

Was genau muss ich in der CSS Datei bearbeiten, dass die Buttons nicht nebeneinander sondern untereinander angezeigt werden?

...zum Beitrag

Warum funktioniert mein Text Decoration nicht?

CSS:

body{

font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

margin: auto 0;

}

.nav{

background: rgb(0, 47, 255);

padding: 0.3em;

color: white;

text-decoration: none!important;

.contact{

text-decoration: none;

}

HTML:

<body>

XXX <span>XXX</span>

</div>

<a class="contact" href="#">Contact</a>

<a class="about-me" href="#">About Me</a>

<a class="projects" href="#">Projects</a>

</div>

</container>

<div>

Test

</div>

</container>

</body>

...zum Beitrag

CSS Abstand um das Element entfernen?

Hallo,

Also ich wollte ein header erstellen, der in html so aussieht:

<div class="versand">
    <p>Versand ab 59€ Frei</p>
</div>

Nun hab ich ihm, folgende css eigenschaften gegeben:

.versand {
    color: white;
    text-align: center;
    background-color: black;
    width: 100%;
    height: 50px;
}

Warum ist jetzt ganz oben immer noch ein Abstand über dem Element?

...zum Beitrag

CSS header nimmt nicht volle breite?

Hallo,

Also ich hab einen Header erstellt, mit folgendem HTML Code:

<header>
    <p>Jetzt auch mit KLARNA zahlen!</p>
</header>

CSS Code:

 header {
    display: flex;
    justify-content: center;
    color: white;
    align-items: center;
    background-color: rgb(102, 102, 102);
    height: 40px;
    margin: 0;
    padding: 0;
    width: 100%;
}

Aber wenn ich nun mir mal per Untersuchen, die Webseite anschaue:

Dann sieht man, dass der header ab einem gewissen zeit punkt nicht mehr die volle breite nimmt. Warum?

...zum Beitrag

HTML Seite verschiebt bei Verkleinerung?

Hallo, ich bin Anfänger was HTML und CSS angeht und habe meine erste Website fürs erste fertig. Nun bin ich beim verkleinern des Windows auf das Problem gestoßen, dass sich die Objekte verschieben und unteranderem auch Überlappen...

Wie kann ich dem entgegen steuern? Gibt es da eine Möglichkeit?

...zum Beitrag

Wie kann ich diese Navbar fixieren?

Hallo,

ich mache gerade meine erste Website und kenne mich noch sehr wenig mit HTML/CSS aus. Ich schaffe es leider nicht, dass meine Navigation beim runter scrollen oben fixiert bleibt. Wie kann man das ausschließlich mit HTML und CSS (also kein Javascript oder so) beheben?

Hier der HTML-Code:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Unser Shop</title>
  <link rel="stylesheet" href="styles.css" type="text/css">
</head>


<body>


<div class="topnav">
  <img src="test.png" alt="test" width="100" height="40" style="float:left; margin-right:25px;">
  <a class="active" href="index.html">Willkommen</a>
  <a href="products.html">Unsere Produkte</a>
  <a href="about-us.html">Über uns</a>
</div>


<div class="page">
<p> Willkommen! </p>
</div>




</body>
</html>

Und hier der CSS-Code:

body {
  background-color: green;
  margin: 0px;
}


/* Add a black background color to the top navigation */
.topnav {
  background-color: #333;
  overflow: hidden;
}


/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}


/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}


/* Add a color to the active/current link */
.topnav a.active {
  background-color: #4CAF50;
  color: white;
}


.page {
  background-color: white;
  margin-right: 125px;
  margin-left: 125px;
  padding-bottom: 85%;
}

...zum Beitrag

Class in css und html wird nicht angesprochen, was tun?

Ich habe eine Frage zum Thema html und css. Die class .logo lässt sich nicht ansprechen und wenn ich mit vsc versuche verschiedene "classes" anzusprechen schlägt er mir nur alte gelöschte "classes" vor. Vielleicht kann mir ja jemand bei diesem Problem helfen Danke im vorraus :)

hier ist der Code:

index.html

<!DOCTYPE html>

<html>

<head>

<title>beispiel</title>

</head>

<body>

<nav>

<li><a href="">Element 2.1</a></li>

<li><a href="">Element 3.1</a></li>

<li><a href="">Element 4.1</a></li>

<li><a href="">Element 5.1</a></li>

<li><a href="">Element 6.1</a></li>

<li><a href="">Element 7.1</a></li>

<li><a href="">Element 8.1</a></li>

</ul>

<li><a href="">Element 1</a></li>

<li><a href="">Element 2</a></li>

<li><a href="">Element 3</a></li>

<li><a href="">Element 4</a></li>

<li><a href="">Element 5</a></li>

<li><a href="">Element 6</a></li>

<li><a href="">Element 7</a></li>

<li><a href="">Element 8</a></li>

</ul>

</nav>

</body>

</html>

style.css

* {

margin: 0;

padding: 0;

}

html {

height: 100%;

}

body {

background-color: rgb(214, 214, 214);

}

nav {

width: 100%;

}

.leftnav {

float: left;

list-style: none;

background-color: cadetblue;

}

.topnav {

width: 100%;

float: right;

list-style: none;

background-color: crimson;

margin-bottom: 0;

}

nav .leftnav li {

margin-left: 25px;

margin-top: 30px;

margin-right: 25px;

margin-bottom: 30px;

}

nav .topnav li {

float: right;

display: inline-block;

margin-right: 50px;

margin-top: 20px;

margin-bottom: 20px;

}

nav .topnav .firstlielement {

display: inline-block;

margin-right: 50px;

margin-top: 20px;

margin-bottom: 20px;

}

nav .topnav li a {

text-decoration: none;

color: white;

}

nav .leftnav li a {

color: rgb(50, 60, 197);

text-decoration: none;

}

nav .leftnav li a:hover {

color: rgb(173, 174, 196);

text-decoration: none;

}

nav .topnav li a:hover {

color: rgb(81, 253, 1);

text-decoration: none;

}

.logo {

}

...zum Beitrag

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-image: url('../images/sun_background.png');

background-attachment: fixed;

background-repeat: no-repeat;

background-size: cover;

}

.cloud-background {

background-image: url('../images/cloud.png');

/* 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;

}

...zum Beitrag

Was möchtest Du wissen?

Deinen Beitrag erstellen