Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

css to make input and textarea looks like simple html text

Tags:

html

css

I had form with a lot of <input> and <textarea>, and I manage to save and retrieve the data with php. Now I need to make another interface (admin) where I have to retrieve the value not as input/textarea field, but as simple string.

To make it simple I had a thousand codes like this,

<div><input type='text' <?php echo "value='".$value1."'";?> ></div>
<div><textarea> <?php echo $value2;?> </textarea></div>

On admin, I want it to appear like this code,

<div><?php echo $value1;?></div>
<div><?php echo $value2;?></div>

I want to keep the <input> and <textarea> cause I'm too lazy to recode everything, but I need it to looks like there's no input/textarea.

Is there anyway I can retweak the input and textarea css to taking down everything except the value and make it looks like simple html text?

Not only the outline, but this include taking down the focus cursor, height/width limitation, and disabled the editable feature.

I know this is not the best idea, but I don't think I had time to remove all those hundred input/textarea field on admin interface.

UPDATE: I need to show the overflowed text in textarea which in default is a scrollbar with something like 'Automatic Height textarea'.

like image 987
user6748005 Avatar asked Nov 03 '25 12:11

user6748005


1 Answers

use follwing css

input,
textarea {
  background: rgba(0, 0, 0, 0);
  border: none;
  outline: 0;
  cursor: text;
}
textarea {
  resize: none;
}
<input type="text" value="xyz" readonly/>
<br>
<textarea readonly>sasf</textarea>

Edit:

Add readonly attribute if dont want user to edit any text and also add cursor:text; in css if disabled cursor is shown in any browser

like image 114
Atal Kishore Avatar answered Nov 06 '25 04:11

Atal Kishore