Solved
Custom text entry boxes
+3I have a survey where I'd like to change the shape of the text entry "form" boxes to look like stars. Is it possible to customize the shape so that respondents enter their text answers in a star shape instead of the default rectangle?
Thank you!
Best answer by MohammedAli_Rajapkar
The code which you shared is a design (how to create star shape) and not "how to convert the rectangle text box into star shape text box"
If you want to just display the star above the text box then you can use this code...
View original
+20Do you have any design which you can share with us? Not sure, if there is any star shape text-box available in HTML / can be created through CSS
+3Something like what is shown on the website below. I am not a coder, so unsure of how/where to insert this in the survey builder, if even possible. I would preferably want the text to appear inside of the star, but it doesn't have to conform to its borders. Text centered over the star would be fine.
https://stackoverflow.com/questions/25384761/pure-css-star-shape
#star-five {
margin: 50px 0;
position: relative;
display: block;
color: red;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid red;
border-left: 100px solid transparent;
transform: rotate(35deg);
}
#star-five:before {
border-bottom: 80px solid red;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
position: absolute;
height: 0;
width: 0;
top: -45px;
left: -65px;
display: block;
content: '';
transform: rotate(-35deg);
}
#star-five:after {
position: absolute;
display: block;
color: red;
top: 3px;
left: -105px;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid red;
border-left: 100px solid transparent;
transform: rotate(-70deg);
content: '';
}
<div id="star-five"></div>
+20The code which you shared is a design (how to create star shape) and not "how to convert the rectangle text box into star shape text box"
If you want to just display the star above the text box then you can use this code...
Leave a Reply
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.