css to make input and textarea looks like simple html text

Question

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'.

Answer 1

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

Answer 2

HTML

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

CSS

.nostyle{
    border:none;
    box-shadow:none;
    outline:none;
    background: #fff;
    cursor:default;
    resize:none;
}

Answer 3

应用input[type="text"], textarea {all: unset;}