Make an <input> look like normal text in a paragraph - html

Question

Take the code here:
<p>Lorem ipsum <input type="text" value="algo" /> dolor sit ...</p>
Sample: http://codepen.io/dbugger/pen/KrAmPx
How can I make the input look like totally normal text, inside the paragraph? I set it to display: inline but the width seems still fixed.

Answer 1

Elements inherit certain default values from browsers. You need to "reset" all of them in order to make the input element appear as the surrounding text:
p input {
border: none;
display: inline;
font-family: inherit;
font-size: inherit;
padding: none;
width: auto;
}
This is as close as you can get with CSS alone. If you want a variable width, you will have to resort to JS instead of CSS, as adjusting an element to it's value is way beyond the scope of CSS. Modifying elements after the fact, based on user input or changes due to just-in-time effects, is what JS/jQuery are used for.
Note that depending on the browser you're using (and due to the possibility that future browsers might do things radically different that nowadays' practices), this list is not necessarily exhaustive.
The only way you can "fake" this effect in a clean manner without JS is to use an element with a contenteditable attribute, which (unlike an input element) will store user input in the content of the element instead of its value. For an example of this technique, see this answer
Though while you won't need JS to get the effect, you would need it to retrieve the content of the element. The only use past that I can imagine is if you're providing a printable document that never needs to programmatically handle the input or store it.

Answer 2

It looks like this is possible now. I found a post describing how to style the input so the HTML form styles are stripped.
Styling HTML forms
They used the following CSS, and for what I was trying to do, it worked perfectly:
input, textarea {
font : .9em/1.5em "handwriting", sans-serif;
border : none;
padding : 0 10px;
margin : 0;
width : 240px;
background: none;
}
Obviously this is too late for the original author, but I'm hoping other people will benefit from it.

Answer 3

Yes it is possible to do this by mimicing the styling with CSS and by using javascript to automatically adjust the length of the text.
Resize an input to the size of its content.
$(function(){
$('#hide').text($('#txt').val());
$('#txt').width($('#hide').width());
}).on('input', function () {
$('#hide').text($('#txt').val());
$('#txt').width($('#hide').width());
});
body,
#txt,
#hide{
font:inherit;
margin:0;
padding:0;
}
#txt{
border:none;
color:inherit;
min-width:10px;
}
#hide{
display:none;
white-space:pre;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Lorem ipsum
<span id="hide"></span><input id="txt" type="text" value="type here ...">
egestas arcu.
</p>

Answer 4

Probably the best way to hack this is just to make your text field into an edit text field but make it uneditable, that way your text field and edit text fields will look the same.

Answer 5

2020 update. Partially you can make it look like normal text with appearance property, setting it to none. Unfortunately, there is nothing much you can do to make the lines wrap, except use js to replace it with the value. https://developer.mozilla.org/en-US/docs/Web/CSS/appearance

Answer 6

I hope this is the answer you're looking for, but if you want to make an input field look like a normal paragraph (assumably so you can edit some of the text of the paragraph), the best way to do so is to:
Disable the input's border
.maskedinput {
border-style: none;
}
And then give it the same styles as the parent element, i.e. text color and bacground color etc etc, and then add a :focus to your CSS that changes the background color such that when the field is clicked, it will be highlighted.

Answer 7

Instead of using the <input> tags, you can use the <textarea> tags. They work almost exactly like <input> tags.
<textarea name="variable" rows="4" cols="50">
Placeholder
</textarea>