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文本

回答

相关问题