I’m facing problem in creating a rating interface that will asks the user to rate the website(by clicking the stars) and add a comment.
The stars became in vertical instead in horizontal, as shown in the link’s picture, I tried many tings but I won’t works.
/* New Rating CSS code */
.Cont {
position: absolute;
width: 633px;
height: 438px;
left: 413px;
top: 252px;
background: #F1F2F0;
padding: 25px;
border-radius: 9px;
box-shadow: 4px 4px 2px #F1F2F0(230, 254, 164);
}
.cont {
position: absolute;
width: 20px;
background: #f1f2f0;
padding: 10px 10px;
border: 1px solid gray;
border-radius: 10px;
/* display: inline-block; */
align-items: center;
justify-content: center;
/* flex-direction: row-reverse; */
}
.cont .post {
display: none;
}
.cont .text {
font-size: 25px;
color: #000;
font-weight: 500;
}
.cont .edit {
position: absolute;
right: 10px;
top: 5px;
font-size: 16px;
color: #000;
font-weight: 500;
cursor: pointer;
}
.cont .edit:hover {
text-decoration: underline;
}
.cont .star-widget input {
transform: rotate(90deg);
display: none;
}
.star-widget label {
font-size: 40px;
position: relative;
color: #fff;
padding: 10px;
float: right;
transition: all 0.2s ease;
}
input:not(:checked)~label:hover,
input:not(:checked)~label:hover~label {
color: #fd4;
}
input:checked~label {
color: #fd4;
}
input#rate-5:checked~label {
color: #fe7;
text-shadow: 0 0 20px #952;
}
.container form {
display: none;
}
input:checked~form {
display: block;
}
form header {
width: 100%;
font-size: 25px;
color: #fe7;
font-weight: 500;
margin: 5px 0 20px 0;
text-align: center;
transition: all 0.2s ease;
}
form .textarea {
height: 100px;
width: 100%;
overflow: hidden;
}
form .textarea textarea {
height: 130px;
position: absolute;
width: 588px;
top: 230px;
outline: #777;
color: gray;
border: 1px solid gray;
background: #fff;
padding: 10px;
font-size: 16px;
resize: none;
text-align: center;
justify-content: center;
}
.textarea textarea:focus {
border-color: #000;
}
form .btn {
position: absolute;
height: 30px;
width: 590px;
top: 380px;
left: 23px;
}
form .btn button {
height: 100%;
width: 100%;
border: 0px solid #000;
outline: none;
background: #c5e8b4;
color: #000;
font-size: 17px;
font-weight: bold;
text-transform: uppercase;
cursor: pointer;
transition: all 0.3s ease;
}
form .btn button:hover {
background: #c5e8b4;
}
<div class="Cont">
<form action="" method="post">
<div class="cont">
<div class="post">
<div class="text">Success </div>
<div class="edit">edit</div>
</div>
<div class="star-widget">
<input type="radio" name="Rate" id="rate-5" value="5">
<label for="rate-5" class="fas fa-star" value="rate-5"></label>
<input type="radio" name="Rate" id="rate-4" value="4">
<label for="rate-4" class="fas fa-star" value="rate-4"></label>
<input type="radio" name="Rate" id="rate-3" value="3">
<label for="rate-3" class="fas fa-star" value="rate-3"></label>
<input type="radio" name="Rate" id="rate-2" value="2">
<label for="rate-2" class="fas fa-star" value="rate-2"></label>
<input type="radio" name="Rate" id="rate-1" value="1">
<label for="rate-1" class="fas fa-star" value="rate-1"></label>
</div>
</div>
<div dir="ltr" class="textarea">
<textarea name="Comment" cols="30" placeholder="Describe your experince in the website"></textarea>
</div>
<div class="btn">
<button type="submit" name="submit">Send</button>
</div>
</form>
</div>
2
Answers
Try this code.
You can wrap each label and input in a div and convert the star-widget into flex. Something like below