Question

我有很多<input>和<textarea>的表单，我设法用php保存和检索数据。现在我需要创建另一个接口（admin），我必须检索该值而不是输入/ textarea字段，而是作为简单的字符串。

为了简单起见，我有一千个像这样的代码，

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

无论如何我可以重新输入输入和textarea css来删除除了值之外的所有内容并使其看起来像简单的html文本吗？

不仅是轮廓，还包括取下焦点光标，高度/宽度限制以及禁用可编辑功能。

我知道这不是最好的主意，但我认为我没时间删除管理界面上的所有那些输入/ textarea字段。

更新：我需要在textarea中显示溢出的文本，默认情况下是一个滚动条，其中包含＆＃39; Automatic Height textarea＆＃39;。

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>

修改

如果不希望用户编辑任何文本，则添加readonly属性，如果在任何浏览器中显示已禁用的光标，则在css中添加cursor:text;

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

css使输入和textarea看起来像简单的html文本

3 个答案: