如何超链接输入文件/标签

我正在使用电子邮件模板的星级评分系统。我找到的一些示例允许您仅选择评分，但我想要超链接每颗星星，以便根据点击的星星将您带到不同的链接。这可能吗？我试图超链接整个输入类型，但它删除了星号图标。如何超链接输入文件/标签

这里是CSS和HTML，以及作为一个例子：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>

来源

2016-12-14 Yevgen

没有JS并保留你当前的标记，我不认为这是可能的使用有效的HTML - 具有互动内容（例如''）作为锚标记的孩子[不符合W3规范]（http://w3c.github.io/html/textlevel-semantics.html#the-a-element），这可能会在浏览器中表现不一致。 – Serlite

你可以尝试这样的事：https://jsfiddle.net/v0qrgopz/1/

我已经转换的输入链接，以便点击它们带你到某个地方。我已经使用Flexbox颠倒它们的顺序，以便选择器a:hover ~ a有效。

来源

2016-12-14 19:01:47 i7nvd

感谢您关注此事。我看到你和我一模一样，所以也许你忘了保存它？ – Yevgen

@Yevgen - 你说得对。我不经常使用小提琴。链接已更新。 – i7nvd

完美！您还删除了我不需要的所有垃圾，因此现在非常简单并且可行。我只是增加了星号的字体大小，并删除了下划线：https://jsfiddle.net/v0qrgopz/3/ – Yevgen

您可以通过onclick事件属性使用一些内嵌JavaScript。里面每个输入标签中包括的属性：

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

例子：https://jsfiddle.net/KyleVassella/pz62gcq0/2/

插入的任何链接你喜欢。如果您不想使用内联，也可以使用单独的JS文件完成此操作。

来源

2016-12-14 19:20:52

谢谢。这对于将来的参考很好，但是因为我将在电子邮件模板中使用它，所以如果还有其他选项，我宁愿不使用任何JS。 – Yevgen

如何超链接输入文件/标签

回答

相关问题