Ändra utseende på HTML element med attribut

Det finns ett sätt att ändra utseende på HTML-element utan att behöva tilldela varje element en egen klass eller id. Detta genom att kalla på elementets attribut.

För exempelvis input-element så anropas attributet ”type”.
I din stilmall (CSS) sätter du stilen för elementen enligt nedan.

  • input[type=”text”]
  • input[type=”password”]
  • input[type=”button”]
  • input[type=”submit”]
  • input[type=”radio”]
  • input[type=”checkbox”]

Det går också att ändra utseende på ett element beroende på attributets värde. I följande exempel kommer alla element med attributet ”title” som har värdet ”Interaktivmedia” att bli röda.

<style type="text/css">
[title=Interaktivmedia]{color:red;}
</style>
<html>
<a href="http://interaktivmedia.se" title="Interaktivmedia">Interaktivmedia:s webbplats</a>
</html>

Man kan även ändra utseende på elementet ifall attributets värde innehåller en viss sträng. I följande exempel kommer alla element med attributet ”title” som innehåller värdet ”Interaktivmedia” att bli blå.

<style type="text/css">
[title~=Interaktivmedia]{color:blue;}
</style>
<html>
<a href="http://interaktivmedia.se" title="Välkommen till Interaktivmedia webbplats">Interaktivmedia:s webbplats</a>
</html>

Kom ihåg att IE7 och IE8 bara tillåter detta om en  !DOCTYPE är satt.