Make an look like normal text in a paragraph

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.

I don't believe this is possible, a least not without resorting to javascript for sizing. What's the use case? What are you trying to achieve? There might be other alternatives, such as using a span element with contenteditable="true" instead of an input. — HaukurHaf, Aug 08 '16 at 13:43
There is more ways to do what I want. I was just wondering if this is actually possible. — Enrique Moreno Tent, Aug 08 '16 at 13:45
This uses Javascript and might not fully answer your question, but - have you had a look here? https://stackoverflow.com/questions/3392493/adjust-width-of-input-field-to-its-input#3392617 — TuringTux, Aug 08 '16 at 13:49
Another question featuring the width of an input field: https://stackoverflow.com/questions/8100770/auto-scaling-inputtype-text-to-width-of-value — TuringTux, Aug 08 '16 at 13:52

score 17 · Answer 1 · edited Feb 16 '18 at 13:54

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.

Yes, though I edited it with further explanation right away, due to the original answer not necessarily doing what you intended. This answers about the *appearance* (which is the part CSS can handle), not the *functionality* — TheThirdMan, Aug 08 '16 at 13:42
Well, but I am asking about **making it look** like normal text. That in itself is **appearance** — Enrique Moreno Tent, Aug 08 '16 at 13:44
You're correct on a rhetoric level, but as far as the browser is concerned, the value of an input field is not layout, and adjusting an element to it's value (not even it's content!) is way beyond the scope of what CSS is capable of, and for good reason. Modifying elements after the fact, based on user input or changes due to just-in-time effects, is what JS/jQuery are used for - such as in [this answer](https://stackoverflow.com/questions/3392493/adjust-width-of-input-field-to-its-input#3392617) linked in another comment. — TheThirdMan, Aug 08 '16 at 13:52

score 4 · Answer 2 · answered Nov 14 '19 at 15:45

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.

DreamTeK · Answer 3 · 2019-09-10T14:29:23.447

1

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>

edited Sep 10 '19 at 14:29

answered Aug 08 '16 at 15:25

DreamTeK

32,537
27
112
171

The downvoter likely had the same problem I have with this answer: It's more chatty than needed and only superficially attempts to solve the question of appearance (you even set Arial as the font, completely unaware what font the rest of the text is using - see my answer on how to remedy this) and instead only focusses on the functionality of expanding the input to the desired width. You *did* come up with a good solution to do this, however, and should you post it in the threads linked in the comments (which attempt roughly the same, but not as good in my opinion), I would upvote those. – TheThirdMan Aug 10 '16 at 06:15
2

Not at all - by using `font-family: inherit;`, the element will inherit the next-lowest value, which would be the font-family the `p` element uses. This is the behavior you want, considering your `p` and `body` font-family could be different. – TheThirdMan Aug 10 '16 at 07:38

score 0 · Answer 4 · answered May 11 '18 at 23:17

0

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.

answered May 11 '18 at 23:17

Adam Katz

6,999
11
42
74

score 0 · Answer 5 · answered Jun 13 '20 at 12:09

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

score 0 · Answer 6 · answered Sep 17 '20 at 21:05

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.

score 0 · Answer 7 · answered Nov 26 '22 at 21:32

0

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>

answered Nov 26 '22 at 21:32

Edvinas55

11
6

Make an look like normal text in a paragraph

7 Answers7