5スタート評価システム

私はこのサイトの例に従うことをしようとしている：http://codepen.io/rogie/pen/jgrIu 5スタート評価システム

しかし、代わりに、望ましい結果を得るための、私は次のことを得ている例のように：（代わりにクリックすることができることスタートでは、私は本当に新しいです開始し、開始のトップでクリック可能なチェック）

を取得し、私は任意の助けをいただければ幸いです。

ここ

<html> 
<head> 
<style> 
.star-rating{ 
    font-size:0; 
    white-space:nowrap; 
    display:inline-block; 
    width:250px; 
    height:50px; 
    overflow:hidden; 
    position:relative; 
    background: 
     url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cG9seWdvbiBmaWxsPSIjREREREREIiBwb2ludHM9IjEwLDAgMTMuMDksNi41ODMgMjAsNy42MzkgMTUsMTIuNzY0IDE2LjE4LDIwIDEwLDE2LjU4MyAzLjgyLDIwIDUsMTIuNzY0IDAsNy42MzkgNi45MSw2LjU4MyAiLz48L3N2Zz4='); 
    background-size: contain; 
    i{ 
opacity: 0; 
position: absolute; 
left: 0; 
top: 0; 
height: 100%; 
width: 20%; 
z-index: 1; 
background: 
     url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cG9seWdvbiBmaWxsPSIjRkZERjg4IiBwb2ludHM9IjEwLDAgMTMuMDksNi41ODMgMjAsNy42MzkgMTUsMTIuNzY0IDE2LjE4LDIwIDEwLDE2LjU4MyAzLjgyLDIwIDUsMTIuNzY0IDAsNy42MzkgNi45MSw2LjU4MyAiLz48L3N2Zz4='); 
background-size: contain; 
    } 
    input{ 
-moz-appearance:none; 
-webkit-appearance:none; 
opacity: 0; 
display:inline-block; 
width: 20%; 
height: 100%; 
margin:0; 
padding:0; 
z-index: 2; 
position: relative; 
&:hover + i, 
&:checked + i{ 
    opacity:1;  
} 
    } 
    i ~ i{ 
    width: 40%; 
    } 
    i ~ i ~ i{ 
width: 60%; 
    } 
    i ~ i ~ i ~ i{ 
width: 80%; 
    } 
    i ~ i ~ i ~ i ~ i{ 
width: 100%; 
    } 
} 


//just styling for the number 
.choice{ 
    position: fixed; 
    top: 0; 
    left:0; 
    right:0; 
    text-align: center; 
    padding: 20px; 
    display:block; 
} 

//reset, center n shiz (don't mind this stuff) 
*, ::after, ::before{ 
    height: 100%; 
    padding:0; 
    margin:0; 
    box-sizing: border-box; 
    text-align: center; 
    vertical-align: middle; 
} 
body{ 
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", 
    Helvetica, Arial, "Lucida Grande", sans-serif; 
    &::before{ 
height: 100%; 
content:''; 
width:0; 
background:red; 
vertical-align: middle; 
display:inline-block; 
    } 
} 
</style> 

<!-- js --> 
<script src="/js/jquery.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0 /jquery.min.js"></script> 
<script type="text/javascript" src="/js/rating.js"></script> 

</head> 

<body> 

<span class="star-rating"> 
    <input type="radio" name="rating" value="1"><i></i> 
    <input type="radio" name="rating" value="2"><i></i> 
    <input type="radio" name="rating" value="3"><i></i> 
    <input type="radio" name="rating" value="4"><i></i> 
    <input type="radio" name="rating" value="5"><i></i> 
</span> 
<strong class="choice">Choose a rating</strong> 

</body> 
</html>

は、あなたが使用するLESSを参照しているJSコード

$(':radio').change(
function(){ 
$('.choice').text(this.value + ' stars'); 
} 
)

出典

2016-03-26 S. Martin

サンプルです：

THANKS

は、私は次のコードでHTMLファイルを作成しました。それはあなたがこのように、通常のCSSにコンパイルしない限り、Webブラウザでは動作しません。

.star-rating { 
    font-size: 0; 
    white-space: nowrap; 
    display: inline-block; 
    width: 250px; 
    height: 50px; 
    overflow: hidden; 
    position: relative; 
    background: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cG9seWdvbiBmaWxsPSIjREREREREIiBwb2ludHM9IjEwLDAgMTMuMDksNi41ODMgMjAsNy42MzkgMTUsMTIuNzY0IDE2LjE4LDIwIDEwLDE2LjU4MyAzLjgyLDIwIDUsMTIuNzY0IDAsNy42MzkgNi45MSw2LjU4MyAiLz48L3N2Zz4='); 
    background-size: contain; 
} 
.star-rating i { 
    opacity: 0; 
    position: absolute; 
    left: 0; 
    top: 0; 
    height: 100%; 
    width: 20%; 
    z-index: 1; 
    background: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cG9seWdvbiBmaWxsPSIjRkZERjg4IiBwb2ludHM9IjEwLDAgMTMuMDksNi41ODMgMjAsNy42MzkgMTUsMTIuNzY0IDE2LjE4LDIwIDEwLDE2LjU4MyAzLjgyLDIwIDUsMTIuNzY0IDAsNy42MzkgNi45MSw2LjU4MyAiLz48L3N2Zz4='); 
    background-size: contain; 
} 
.star-rating input { 
    -moz-appearance: none; 
    -webkit-appearance: none; 
    opacity: 0; 
    display: inline-block; 
    width: 20%; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    z-index: 2; 
    position: relative; 
} 
.star-rating input:hover + i, 
.star-rating input:checked + i { 
    opacity: 1; 
} 
.star-rating i ~ i { 
    width: 40%; 
} 
.star-rating i ~ i ~ i { 
    width: 60%; 
} 
.star-rating i ~ i ~ i ~ i { 
    width: 80%; 
} 
.star-rating i ~ i ~ i ~ i ~ i { 
    width: 100%; 
} 
.choice { 
    position: fixed; 
    top: 0; 
    left: 0; 
    right: 0; 
    text-align: center; 
    padding: 20px; 
    display: block; 
} 
*, 
::after, 
::before { 
    height: 100%; 
    padding: 0; 
    margin: 0; 
    box-sizing: border-box; 
    text-align: center; 
    vertical-align: middle; 
} 
body { 
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
} 
body::before { 
    height: 100%; 
    content: ''; 
    width: 0; 
    background: red; 
    vertical-align: middle; 
    display: inline-block; 
}

出典

2016-03-26 01:33:29 David784

はありがとう!!!!それは今働く。私の無知のために申し訳ありませんが、何が少ないかわかりません。私はそれが実際には –

@ Sと言ったCSSにあったと思った。 Martin：コードペインのリンクのCSSセクションの上部を見ると、「CSS（LESS）」が表示されます。「View Compiled」と表示されているボタンもあります。そのボタンをクリックすると、まっすぐなCSSが得られます。 – David784

答えて

関連する問題