如何使文本区域在表单上看起来像input[text]无效
要使文本区域（textarea）在表单上看起来像一个不可用的输入框（input[type="text"]），可以通过CSS样式来实现。以下是一些基础概念和相关步骤：
基础概念
- CSS样式：通过CSS可以控制HTML元素的显示方式。
- 禁用状态：HTML元素可以通过设置
disabled属性来使其不可用。 - 视觉效果：通过CSS可以改变元素的视觉效果，使其看起来像是被禁用的。
实现步骤
1. HTML部分
首先，创建一个文本区域（textarea）和一个输入框（input[type="text"]），并将文本区域的disabled属性设置为true。
<form>
<input type="text" id="disabledInput" value="This is a disabled input" disabled>
<textarea id="disabledTextarea" disabled>This is a disabled textarea</textarea>
</form>2. CSS部分
使用CSS来改变文本区域的样式，使其看起来像一个不可用的输入框。
/* 通用禁用样式 */
input:disabled, textarea:disabled {
background-color: #f0f0f0; /* 浅灰色背景 */
color: #a9a9a9; /* 浅灰色文字 */
border: 1px solid #ccc; /* 边框颜色 */
cursor: not-allowed; /* 鼠标指针样式 */
padding: 5px; /* 内边距 */
resize: none; /* 禁止调整大小 */
}
/* 特定样式使textarea看起来像input */
#disabledTextarea {
width: 200px; /* 设置宽度 */
height: 20px; /* 设置高度，使其与input相似 */
overflow: hidden; /* 隐藏多余内容 */
white-space: nowrap; /* 不换行 */
text-overflow: ellipsis; /* 文本溢出显示省略号 */
}应用场景
- 表单设计：在某些情况下，你可能希望表单中的某些字段看起来是禁用的，但实际上并不需要用户输入。
- 预览模式：在预览模式下，显示一些不可编辑的信息。
可能遇到的问题及解决方法
- 样式不一致：如果文本区域和输入框的样式仍然不一致，可以通过更详细的CSS调整来解决。
- 浏览器兼容性：不同浏览器对CSS样式的支持可能有所不同，可以通过添加浏览器前缀或使用CSS重置来解决兼容性问题。
示例代码
以下是一个完整的示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Disabled Textarea Example</title>
<style>
input:disabled, textarea:disabled {
background-color: #f0f0f0;
color: #a9a9a9;
border: 1px solid #ccc;
cursor: not-allowed;
padding: 5px;
resize: none;
}
#disabledTextarea {
width: 200px;
height: 20px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<form>
<input type="text" id="disabledInput" value="This is a disabled input" disabled>
<textarea id="disabledTextarea" disabled>This is a disabled textarea</textarea>
</form>
</body>
</html>通过上述方法，你可以使文本区域在表单上看起来像一个不可用的输入框。
相关·内容
这就是我的文本区域在invalid上的样子，如何让它看起来有点像文本框(周围的边框更小) ? 它应该如下图所示。 ? 我使用了下面的css，但不起作用。
浏览 87提问于2016-05-26得票数 2
回答已采纳
1回答
最后，当用户单击"submit“时，我正在使用Bootstrap的form-validation.js在提交表单之前进行检查。这一切都运行得很好。然而，表单太长了，当用户点击“提交”时，他们看到的只是底部可选问题上的一堆绿色复选标记。(他们没有提交表单的唯一迹象是页面没有重新加载。)(并且该表单并未实际提交。)
Javascript不是我的强项，但我的第一个想法是修改表单验证脚本，使提交按钮附近的一个小div在发现错误时可见，但我还没有弄清楚
浏览 3提问于2019-02-26得票数 0
class="full-width-input">
<input matInput type="text" formControlName="invitationComment" placeholder当用户点击submit时，邀请就会被发送，我就会像这样清除表单： this.createInvitationForm.reset(); 然而，当我这样做时，表单看起来像这
浏览 26提问于2019-02-21得票数 0
回答已采纳
3回答
我有一个2行高的文本框。当文本区域中只有一行文本时，如下所示：
我正在寻找的是一种方法，使它看起来像这样，如果只有一行得到文本：
当文本区域中有2行文本时，我希望它看起来像这样：
以下是代码：
<textareaclass='input_box_menu'>Test text&l
浏览 4提问于2014-08-04得票数 0
回答已采纳
我需要每个表单的文本输入具有不同的样式，但它仍然将文本css规则应用于两个表单。当前的代码使它看起来像这样；.mail-form {width: 100%;text-align: left;<p>First Name:<
浏览 0提问于2018-04-19得票数 0
我希望我的表单中的文本区字段显示为与文本输入字段相同的跨浏览器。我不想强制使用自定义样式--我只想使用用户浏览器中的任何标准样式。所以我知道我可以用 border-style: inset;}
然后它们可以在Chrome，ium上匹配，但在Firefox/Iceweasel上就不匹配了，例如。那么，有没有一种直接的方法可以对浏览器说“请使用您要用于input[type="<
浏览 0提问于2013-01-15得票数 12
回答已采纳
3回答
那么，上面的方法比使用文本区域和innerHTML更好吗？<input id="list_5" type="button" value="Espresso $2.50" onclick="changeit(this.value,this.id);">如果你在谷歌上搜索为什么不好-你会得到很多结果，比如(例如innerHTML on SO)[
浏览 3提问于2015-04-10得票数 1
我有一些当前是输入字段的字段。一些应该允许编辑，而另一些则不允许。如果不从输入字段中更改它们，有没有简单的方法可以让我不能编辑它们？我正在寻找只有一个CSS或其他种类的属性，如果存在。真理子
浏览 1提问于2011-04-20得票数 2
我有一个由文本区域组成的表单，行号感谢Javascript。我使用这个表单验证JSON，就像jsonlint.org所做的那样。用户输入一些JSON，按validate，然后返回答案。因此，我要做的是：Python程序给出的行号对应于文件中的行号，而不是
浏览 3提问于2012-06-14得票数 1
回答已采纳
我正在尝试这样做，以便当用户在文本区域中键入超过10个单词时，提交按钮将被启用。下面是我使用的代码。即使里面有10+单词，它也不让我提交。任何帮助都将不胜感激。 echo "<input type=\"hidden$arid . &
浏览 0提问于2013-03-18得票数 0
1回答
目前，我正在尝试使用Jsoup发布一些表单数据。这对于普通的输入类型字段工作得很好，但是对于文本区域字段就不是这样了。你知道，如何用Jsoup发布文本区数据吗？我的html表单应该是这样的： <input type="text" name="input1">
浏览 16提问于2016-08-15得票数 1
回答已采纳
我想尽快提交表单，当我点击enter在文本区域，这是很好的输入类型文本，但是，我不知道如何做它与文本区域。我必须使用文本区域，因为我希望文本输入是可扩展的，我如何使它工作？myApp" ng-controller="myCtrl">
<form ng-submit="sendMessage(newMess
浏览 0提问于2021-10-12得票数 0
回答已采纳
3回答
当用户单击表单的中央或右侧文本区域(右侧的登录表单)时，不会发生任何事情。只有当用户单击这些区域的左边时，它才能工作。这是我的。以下是表格： Username<input type="text" name="userid" size="25"/>
Passwor
浏览 5提问于2015-09-09得票数 0
回答已采纳
1回答
我在一个表单中有一个文本区域，在文本区域下面有一些内容。当我展开/调整文本区域的大小时，下面的内容将保持不变。当文本区域调整大小时，如何使下面的内容移动？"email.php">
<span>Company</spa
浏览 1提问于2014-08-17得票数 0
回答已采纳
我试图使占位符文本看起来与输入到表单字段中的实际文本完全一样。第二个字段显示输入到该字段的文本。看上去更黑。以下是html代码：<input type="text" placeholder="http://twitter.com"
浏览 1提问于2015-05-05得票数 1
回答已采纳
给定以下组件(带有选择器my-template)： <ng-content></ng-content>并像这样使用它： <input type="text" required name="firstName" [(ngModel)]="firstName"/
浏览 7提问于2016-12-13得票数 5
1回答
我有一段文字: input="some<br/>text"如我所愿text<textarea>{{input|safe}}</textarea>some<br/>text
我尝试了|linebreaks，它使文本看起来<e
浏览 4提问于2014-05-24得票数 1
回答已采纳
1回答
我正在开发一个SPA，这个应用程序中的一个表单使用了一个使用第三方库实现的输入屏蔽文本框。 } }我的表单代码看起来
<div ng-controller="nodesListCtrl as vm">type="text" data-ip-mask ng-model="vm.myIp" name="CtrIp
浏览 2提问于2015-04-16得票数 1
回答已采纳
1回答
在表单中使用HTML
、、、、
我正在尝试创建一个接受的表单。因此，当我键入<br>或使用divs时，它会相应地理解和填充我的内容块。有人能为我指出正确的方向吗？这是我使用的表单，如果这有帮助的话： <%= f.error_notification %>
<%= f.input :title %>
<%= f.input</e
浏览 0提问于2015-07-18得票数 0
回答已采纳
我试图使我的textarea和submit按钮在表单中成为同一行(和高度)，这样文本区域占宽度的90%，submit按钮占10%，但是我得到的是：textarea {width:10%;}<textarea cols="30" rows="1" placeholder="Text</
浏览 0提问于2018-05-08得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
云直播活动推荐
腾讯云开发者
