css使輸入和textarea看起來像簡單的HTML文本

我有很多<input>和<textarea>的形式，我設法保存和檢索數據與PHP。現在我需要做另一個接口（管理員），我必須檢索值不作爲input/textarea字段，但作爲簡單的字符串。css使輸入和textarea看起來像簡單的HTML文本

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

<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。

是否有反正我可以retweak輸入和textarea的CSS取下除了價值的一切，使它看起來像簡單的HTML文本？

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

我知道這不是最好的主意，但我不認爲我有時間去除管理界面上的所有這些百個input/textarea字段。

更新：我需要顯示textarea中的溢出文本，默認情況下它是一個類似於'Automatic Height textarea'的滾動條。

來源

2016-10-11 user6748005

你可以刪除its'border'和CSS'箱shadow'所以它看起來像一個純文本。也在其'：焦點'狀態 –

所以你想改變標籤？ JS將是必需的：'[] .forEach.call（document.querySelectorAll（'input，textarea'），function（e）{e.parentNode.appendChild（document.createTextNode（e.value））; e.parentNode.removeChild （e）;}）;'（或多或少） – Xenos

哇，嚴重的JavaScript代碼工作。雖然我的問題是關於CSS，但這個評論對我來說是最好的解決方案。 – user6748005

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

編輯：

添加只讀屬性，如果不希望用戶編輯任何文本，並在CSS中添加cursor:text;如果禁用光標顯示在任何瀏覽器中

來源

2016-10-11 08:12:59

'光標：默認;'會更合適 – ArmaGeddON

是的，但通常我們顯示光標選擇的文本。但無論如何，這取決於用戶的選擇 –

我需要在textarea中顯示溢出的文本。這似乎並沒有給我足夠的解決方案，由於這溢出-y：隱藏 – user6748005

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

來源

2016-10-11 08:16:03 ArmaGeddON

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

來源

2016-10-11 08:25:31 Yinon

css使輸入和textarea看起來像簡單的HTML文本

回答

相關問題