Custom text entry boxes | XM Community
Solved

Custom text entry boxes

  • 12 November 2018
  • 3 replies
  • 6 views

Badge +3
I 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!
icon

Best answer by MohammedAli_Rajapkar 13 November 2018, 18:09

View original

3 replies

Userlevel 7
Badge +20
Do 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
Badge +3
Something 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>
Userlevel 7
Badge +20
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...

Leave a Reply