How to curve input?

Question

css

There is input type=text
It's straight forward. Standard white stick
I would like to make a curved stick, a poker out of this stick

Answer 1

I would like to make a curved stick out of this stick

I'm afraid to ask how much curved, as an example, not?
https://jsfiddle.net/vtLn0596/1/

Answer 2

<script language="JavaScript">
function setMyTextValue() {
 myTextValue = "bla-bla-bla";
}
</script>
<form>
    <input type="hidden" name="myTextValue" />
    <svg onChange="setMyTextValue()">
</form>

Examples can be found here .

Answer 3

Unfortunately, you can’t bend the input itself, if you need the functionality of the input, try this crutch - add SVG in place of the input as suggested in other answers, put the input next to for example. hang a click handler on the SVG, in which, on clicking on the image, move the focus to input . And on the input, hang a handler on the "input" event in which you change the contents of the text string in SVG{display:none}

svg.querySelector("здесь_селектор_текстового_элемента").innerHTML = input.value;

Answer 4

1. www.olivermusebrink.de/beta/curvedtext
2. https://github.com/codrops/Arctext
3. https://circletype.labwire.ca/
4. https://css-tricks.com/snippets/ svg/curved-text-al...
5. https://www.visualcinnamon.com/2015/09/placing-tex...
BONUS: roundsliderui.com