I'm trying to add a text input field inside a contenteditable div in IE 9, but the input field ends up being resizable and has a border around it. I've attempted to fix this using CSS, but unfortunately, it's not working as expected. Here is the code snippet:
HTML:
<body>
<div id="wrapper">
<div id="input" style="border:1px solid black;height:100px;" tabindex="0" onfocus="divFocus();" onblur="divBlur();">
<p id="text" contenteditable="true">
<input type="text" id="textBox" size="3" onblur="keydown(32);" onkeypress="this.style.width = ((this.value.length + 1) * 8) + 'px';"
value="Anything" />
</p>
</div>
</div>
</body>
CSS:
#textBox
{
text-wrap:normal;
font-family:arial;
font-size:15px;
border:none;
resize:none;
border:0;
border-color: transparent;
}
#textBox:focus
{
outline: none;
outline-width: 0;
outline-color: transparent;
}