CODEWITHSUNDEEP
htmlcsshyperlink
Yevgen
Yevgen

Reputation: 797

How to hyperlink input files/labels

I am using a star rating system for email templates. Some examples I found allow you to only select the rating, but I would like to hyperlink each star so that it takes you to a different link depending on the star that is clicked. Is this possible? I tried to hyperlink the entire input type but it removes the star icon.

Here is the CSS and HTML, as well as an example: https://jsfiddle.net/pz62gcq0/

<!DOCTYPE html>
<html>
<head>
    <meta charset= "UTF-8">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Star rating using pure CSS</title>
</head>
<style>
*{
    margin: 0;
    padding: 0;
}
.rate {
    border: 1px solid #cccccc;
    float: left;
    height: 46px;
    padding: 0 10px;
}
.rate:not(:checked) > input {
    position:absolute;
    top:-9999px;
}
.rate:not(:checked) > label {
    float:right;
    width:1em;
    overflow:hidden;
    white-space:nowrap;
    cursor:pointer;
    font-size:30px;
    color:#ccc;
}
.rate:not(:checked) > label:before {
    content: '★ ';
}
.rate > input:checked ~ label {
    color: #ffc700;    
}
.rate:not(:checked) > label:hover,
.rate:not(:checked) > label:hover ~ label {
    color: #deb217;  
}
.rate > input:checked + label:hover,
.rate > input:checked + label:hover ~ label,
.rate > input:checked ~ label:hover,
.rate > input:checked ~ label:hover ~ label,
.rate > label:hover ~ input:checked ~ label {
    color: #c59b08;
}
</style>
<body>
    <div class="rate">
        <input type="radio" id="star5" name="rate" value="5" /><label for="star5" title="text">5 stars</label>
        <input type="radio" id="star4" name="rate" value="4" /><label for="star4" title="text">4 stars</label>
        <input type="radio" id="star3" name="rate" value="3" /><label for="star3" title="text">3 stars</label>
        <input type="radio" id="star2" name="rate" value="2" /><label for="star2" title="text">2 stars</label>
        <input type="radio" id="star1" name="rate" value="1" /><label for="star1" title="text">1 star</label>
    </div>
</body>

</html>

Upvotes: 1

Views: 78

Answers (2)

Kyle Vassella
Kyle Vassella

Reputation: 2654

You could use some inline JavaScript via the onclick event attribute. Inside each of your input tags include the attribute:

onclick="window.open('http://www.stackoverflow.com')"

Example: https://jsfiddle.net/KyleVassella/pz62gcq0/2/

Insert whatever link you like. This could also be done using a separate JS file if you don't want to use inline.

Upvotes: 2

i7nvd
i7nvd

Reputation: 1318

You could try something like this: https://jsfiddle.net/v0qrgopz/1/

I've converted the inputs to links so that clicking on them takes you somewhere. I've used Flexbox to reverse the order of them so that the selector a:hover ~ a works.

Upvotes: 2

Related Questions