Custom text entry boxes

CatlinCatlin FloridaCommunity Member Qubie ✭

Custom text entry boxes

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!

Best Answers

  • Mohammedali_Rajapakar_UgamMohammedali_Rajapakar_Ugam Mumbai - India Wizard ✭✭✭✭✭
    Accepted Answer

    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

  • Mohammedali_Rajapakar_UgamMohammedali_Rajapakar_Ugam Mumbai - India Wizard ✭✭✭✭✭
    Accepted Answer

    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...

Answers

  • CatlinCatlin FloridaCommunity Member Qubie ✭

    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: '';
    }

Sign In to Comment