how can i create text box with side arrow?


How can I create a textbox with side arrow using HTML/CSS?

Something like the below image:

Side-Arrow-Image

as asked on Facebook group

 


Asked by:- vikas_jk
0
: 9528 At:- 6/20/2017 7:10:57 AM
CSS HTML textbox







2 Answers
profileImage Answered by:- kid

wow! Thank you very much.

1
At:- 6/20/2017 8:08:31 AM


profileImage Answered by:- vikas_jk

Use the below HTML/CSS to create it,

HTML

<p>
  <input type="text" />
  
</p>
<div id="pointer"></div>

CSS

body {background:#ff004e;padding:40px}

p {background:white; -webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px; width:250px; height:50px}

p input{
  border:none;line-height:50px; padding:0px 10px;
}

#pointer{border:solid 10px transparent;border-right-color:#fff;position:absolute;margin:-35px 0 0 -20px;}

Output :

Output-Textbox-Side-Arrow

Let me know if this works for you, thanks

Another example (just place textbox code instead of text, in between), if needed

Codepen

Bubbly

0
At:- 6/20/2017 7:23:33 AM Updated at:- 6/20/2017 7:44:49 AM






Login/Register to answer
Or
Register directly by posting answer/details

Full Name *

Email *




By posting your answer you agree on privacy policy & terms of use