2 verschiedene Sterne-Bewertungen erstellen

Wie kann ich 2 verschiedene Sterne-Bewertungen erstellen und diese mit einem "onClick" absenden?
z.B.
Gestaltung:
Farbgebung:

Meine Versuche aus dem Artikel [content:326544]
das dort genannte Beispiel codepen.io/jamesbarnett/pen/vlpkh zu duplizieren ist gescheitert.

Wenn ich den CSS Code in meine css einfüge bekomme ich keine Sterne angezeigt. Wieso geht das nicht?

<head lang="de">  
  <meta charset="UTF-8">  
  <title>Bewertungen</title>
  <link href="my_style.css" rel="stylesheet" type="text/css" />  
</head>

Vielen Dank für Eure Hilfe

Bitte markiere auch die Kommentare, die zur Lösung des Beitrags beigetragen haben

Content-ID: 71486463556

Url: https://administrator.de/forum/2-verschiedene-sterne-bewertungen-erstellen-71486463556.html

Ausgedruckt am: 22.12.2024 um 06:12 Uhr

6 Kommentare

Neuester Kommentar

Hi,

poste mal deine gesamte HTML + CSS als Spoiler.

LG

Hier kommt meine html Seite:

<!DOCTYPE html>
<html>

<head lang="de">  
  <meta charset="UTF-8">  
  <title>Bewertungen</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  <link href="my_style.css" rel="stylesheet" type="text/css" />  
<style>

</style>
 </head>
<body>
<center>
  <h2>Bewertungen</h2>
 
<div class="container">  
				
<h1>Pure CSS Star Rating Widget</h1>
<fieldset class="rating">  
    <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>  
    <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>  
    <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>  
    <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>  
    <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>  
    <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>  
    <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>  
    <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>  
    <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>  
    <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>  
</fieldset>
<input type="button" id="btnGetStarValue" value="Get Rating" onClick="alert('Anzahl Sterne: ' + GetRating());" style="margin:0px 10px">    
 
</div>

</body>
</html>

und hier meine css als my_style.css:

.container {
	width: 18%;
	height: 400px;
	margin: 0 auto;
	border: 1px solid black;
	padding: 5px;
	clear: both;
}

@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);

fieldset, label { margin: 0; padding: 0; }
body{ margin: 20px; }
h1 { font-size: 1.5em; margin: 10px; }

/****** Style Star Rating Widget *****/

.rating1 { 
  border: none;
  float: left;
}

.rating1 > input { display: none; } 
.rating1 > label:before { 
  margin: 5px;
  font-size: 1.25em;
  font-family: FontAwesome;
  display: inline-block;
  content: "\f005"; 
}

.rating1 > .half:before { 
  content: "\f089"; 
  position: absolute;
}

.rating1 > label { 
  color: #ddd; 
 float: right; 
}

/***** CSS Magic to Highlight Stars on Hover *****/

.rating1 > input:checked ~ label, /* show gold star when clicked */
.rating1:not(:checked) > label:hover, /* hover current star */
.rating1:not(:checked) > label:hover ~ label { color: #FFD700;  } /* hover previous stars in list */

.rating1 > input:checked + label:hover, /* hover current star when changing rating */
.rating1 > input:checked ~ label:hover,
.rating1 > label:hover ~ input:checked ~ label, /* lighten current selection */
.rating1 > input:checked ~ label:hover ~ label { color: #FFED85;  } 

Moin,

ich bin jetzt nicht der css Profi, aber wenn die Class im CSS "rating1" benannt ist, dann solltest du die auch mit gleichem Namen im HTML referenzieren, oder?

lg,
Slainte

Hi,

genau das ist das Problem.
Du referenzierst den Style von der Klasse .rating aber in der css gibts nur .rating1.
Ergo wird kein Style applied, weil es ja keinen Style gibt...

LG

Ups, sorry das war von meinem Versuch es auf 2 Bewertungen zu duplizieren.

Hier die richte CSS

.container {
	width: 18%;
	height: 400px;
	margin: 0 auto;
	border: 1px solid black;
	padding: 5px;
	clear: both;
}

@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);

fieldset, label { margin: 0; padding: 0; }
body{ margin: 20px; }
h1 { font-size: 1.5em; margin: 10px; }

/****** Style Star Rating Widget *****/

.rating { 
  border: none;
  float: left;
}

.rating > input { display: none; } 
.rating > label:before { 
  margin: 5px;
  font-size: 1.25em;
  font-family: FontAwesome;
  display: inline-block;
  content: "\f005"; 
}

.rating > .half:before { 
  content: "\f089"; 
  position: absolute;
}

.rating > label { 
  color: #ddd; 
 float: right; 
}

/***** CSS Magic to Highlight Stars on Hover *****/

.rating > input:checked ~ label, /* show gold star when clicked */
.rating:not(:checked) > label:hover, /* hover current star */
.rating:not(:checked) > label:hover ~ label { color: #FFD700;  } /* hover previous stars in list */

.rating > input:checked + label:hover, /* hover current star when changing rating */
.rating > input:checked ~ label:hover,
.rating > label:hover ~ input:checked ~ label, /* lighten current selection */
.rating > input:checked ~ label:hover ~ label { color: #FFED85;  } 

Hi,

laut CSS Specs müssen @import Regeln immer als erstes kommen.

@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);

.container {
	width: 18%;
	height: 400px;
	margin: 0 auto;
	border: 1px solid black;
	padding: 5px;
	clear: both;
}

fieldset, label { margin: 0; padding: 0; }
body{ margin: 20px; }
h1 { font-size: 1.5em; margin: 10px; }

/****** Style Star Rating Widget *****/

.rating { 
  border: none;
  float: left;
}

.rating > input { display: none; } 
.rating > label:before { 
  margin: 5px;
  font-size: 1.25em;
  font-family: FontAwesome;
  display: inline-block;
  content: "\f005";  
}

.rating > .half:before { 
  content: "\f089";  
  position: absolute;
}

.rating > label { 
  color: #ddd; 
 float: right; 
}

/***** CSS Magic to Highlight Stars on Hover *****/

.rating > input:checked ~ label, /* show gold star when clicked */
.rating:not(:checked) > label:hover, /* hover current star */
.rating:not(:checked) > label:hover ~ label { color: #FFD700;  } /* hover previous stars in list */

.rating > input:checked + label:hover, /* hover current star when changing rating */
.rating > input:checked ~ label:hover,
.rating > label:hover ~ input:checked ~ label, /* lighten current selection */
.rating > input:checked ~ label:hover ~ label { color: #FFED85;  } 