CSS使輸入和textarea看起來像簡單的html文本

Question

我有很多<input>和<textarea>表單，並且設法用php保存和檢索數據。 現在，我需要創建另一個接口（管理員），在該接口中，我必須檢索的值不是輸入/文本區域字段，而是簡單的字符串。

簡單起見，我有一千個這樣的代碼，

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

在管理員上，我希望它看起來像這樣的代碼，

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

我想保留<input>和<textarea>因為我懶得重新編碼所有內容，但是我需要它看起來好像沒有輸入/文本區域。

無論如何，我可以重新調整輸入和textarea css值以除去除值之外的所有內容，並使它看起來像簡單的html文本嗎？

不僅是輪廓，而且還包括取下焦點光標，高度/寬度限制以及禁用可編輯功能。

我知道這不是最好的主意，但我認為我沒有時間刪除管理界面上的所有那100個輸入/文本字段。

更新：我需要在textarea中顯示溢出的文本，默認情況下是帶有“ Automatic Height textarea”之類的滾動條。

Answer 1

使用以下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> 

編輯：

如果不想用戶編輯任何文本，則添加只讀屬性，並且還添加cursor:text; 如果在任何瀏覽器中顯示了禁用的光標，則在css中

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;}