Farbe aktiver Tabs anpassen

[Dsimon24]

Hallo zusammen,

ich habe auf meiner Website einige Tabs in Form von Radiobutton, die über CSS bearbeitet
wurden und nun quasi aussehen, wie Button. Jetzt möchte ich, dass ein aktiver (gedrückter)
Tab eine andere Form annimmt. Leider funktioniert das bei mir jedoch nicht. Ich bräuchte
dazu mal eure HIlfe...

Der HTML-Code der Tabs sieht wie folgt aus:

<input type="radio" name="tabs" id="<?php echo $row->tab_no; ?>"/>
<label for="<?php echo $row->tab_no; ?>"><?php echo $row->time ?></label>

Ich habe dies jetzt schon mit folgendem CSS-Code probiert:

input[type="radio"]:checked+label {
            font-color: blue;

Leider ohne Funktion - kann mir einer einen Rat geben, wie ich das umsetzen kann?

VG, David

 

[djheke]

input[type="radio"]:checked+label {
           color: blue;
}

 

[SpiceLab]

font-color gibt's nicht. Gesucht ist color:blue.

https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Textformatierung/color

 

[Dsimon24]

Das hat leider auch nicht funktioniert.

Ich denke mal, der Code ist vielleicht zu verzettelt...
Ich packe ihn mal mit rein (CSS-Code):

    .tabs {
      float: none;
      list-style: none;
      position: relative;
      margin: 0;
      text-align: left;
        }
      .tabs li {
        float: left;
        display: block;
      }
      .tabs input[type="radio"] {
        position: absolute;
        left: -9999px;
        top: -9999px;
      }
      .tabs label {
        display: block;
        padding: 12px 20px;
        border-radius: 3px;;
        margin-right: 10px;
        font-weight: bold;
        color: white;
        text-transform: uppercase;
        background: rgba(0,0,0,0.6);
        box-shadow: -1px 1px 3px grey;
        position: relative;
        cursor: pointer;
        top: 4px;
        @include transition(all 0.2s ease-in-out);
        &:hover {
          background: darken($tabs-base-color, 10);
        }
        .tabs label:hover {
            background: rgba(0,0,0,0.8);
        }
       
        input[type="radio"]:checked+label {
           color: blue;
        }
       
      }
      .tabs .tab-content{
        z-index: 2;
        display: none;
        overflow: hidden;
        width: 100%;
        padding: 25px 0; 
        position: absolute;
        top: 53px;
        left: 0;
        background: darken($tabs-base-color, 15);
      }
      //The Magic
      .tabs [id^="tab"]:checked + label {
        top: 0;
        padding-top: 17px;
        background: #ccc;
      }
      .tabs [id^="tab"]:checked ~ [id^="tab-content"] {
        display: block;
      }
    .tabs h2 {
        font-size: 18px;
        }     
    .tabs p {
        margin: 10px 0;
        }
       
    .tabs form input[type="radio"] {
        position: relative;
        left: 0;
        top: 0;
      }   
     .tabs form #field-container{
        border: 1px solid #e3e3e3;
        margin-bottom: 25px;
        margin-top: 25px;
        }
    .tabs form #field-container div{
         margin: 0 0 5px 15px;
        }
    .tabs form label {
        display: block;
        margin-bottom: 10px;
        padding: 10px 15px;
        border-radius: 0;
        margin-right: 0;
        border: none;
        font-size: 18px;
        font-weight: normal;
        text-transform: none;
        background-color: red;
        position: relative;
        cursor: pointer;
        top: 0px;
        }

 

[SpiceLab]

Das hat leider auch nicht funktioniert.

Ich denke mal, der Code ist vielleicht zu verzettelt...

Jip. Überprüf mal aufmerksam die { }-Klammern im CSS.

Korrekt gesetzt, funktioniert's auch wie gewünscht.

 

[scbawik]

Jip. Überprüf mal aufmerksam die { }-Klammern im CSS.

Korrekt gesetzt, funktioniert's auch wie gewünscht.

Sehe diesbezüglich eigentlich keinen Fehler, das ist kein CSS sondern SCSS (Vielleicht weiß der TE das aber selbst nicht...).

@Dsimon24 kannst du ein jsfiddle.net vom Problem liefern? Dann wäre es leichter den Fehler zu finden.

 

[SpiceLab]

Sehe diesbezüglich eigentlich keinen Fehler, das ist kein CSS sondern SCSS

Okay, da hast Du natürlich recht :)

Aber ein Fehler steckt tatsächlich drin:

//The Magic

Richtige Syntax für Kommentare in CSS:

/*The Magic*/

 

[scbawik]

Okay, da hast Du natürlich recht :)

Aber ein Fehler steckt tatsächlich drin:

//The Magic

Richtige Syntax für Kommentare in CSS:

/*The Magic*/

In SCSS ist auch ersteres möglich

 

[SpiceLab]

In SCSS ist auch ersteres möglich

*blush*