我可以在输入字段上使用：before或：after伪元素吗？
我试图在input字段上使用:after CSS伪元素，但是它不起作用。 如果我使用span ，它可以正常工作。
<style type="text/css">
.mystyle:after {content:url(smiley.gif);}
.mystyle {color:red;}
</style>
这有效（在“ buu！”之后和“更多”之前放入笑脸）
<span class="mystyle">buuu!</span>a some more
这是行不通的-它只将someValue涂成红色，但没有笑脸。
<input class="mystyle" type="text" value="someValue">
我究竟做错了什么？ 我应该使用另一个伪选择器吗？
注意：我无法在input周围添加span ，因为它是由第三方控件生成的。
#1楼
我发现这个帖子的原因是我遇到了同样的问题，这是对我有用的解决方案。 与其替换输入的值，不如将其删除并在其后绝对放置一个相同大小的跨度，该跨度可以具有:before伪类，并使用您选择的图标字体应用于它。
<style type="text/css">form {position: relative; }
.mystyle:before {content:url(smiley.gif); width: 30px; height: 30px; position: absolute; }
.mystyle {color:red; width: 30px; height: 30px; z-index: 1; position: absolute; }
</style><form>
<input class="mystyle" type="text" value=""><span class="mystyle"></span>
</form>
#2楼
奇怪的是，它适用于某些类型的输入。 至少在Chrome中，
<input type="checkbox" />
工作正常，与
<input type="radio" />
只是type=text和其他一些无效。
#3楼
根据CSS 2.1规范中的注释 ，该规范“并未完全定义：before和：after与替换元素（例如HTML中的IMG）的交互。 尽管input不再是真正的替换元素，但基本情况没有改变:before和:after对它的影响未指明，并且通常不起作用。
解决方案是找到一种不同的方法来解决您要解决的问题。 将生成的内容放入文本输入控件中会产生很大的误导性：对用户而言，它似乎是控件中初始值的一部分，但无法修改-因此，它似乎是在开始时就被强制执行的操作。控件，但它不会作为表单数据的一部分提交。
#4楼
我使用background-image为必填字段创建了红点。
input[type="text"][required] {background-image: radial-gradient(red 15%, transparent 16%);background-size: 1em 1em;background-position: top right;background-repeat: no-repeat
}
在Codepen上查看
#5楼
Internet Explorer 7及以下版本中的任何元素均不支持:after和:before 。
它也不打算用于替换后的元素，例如表单元素 （输入）和图像元素 。
换句话说，使用纯CSS是不可能的 。
但是，如果使用jQuery ，则可以使用
$(".mystyle").after("add your smiley here");
.after上的API文档
用javascript附加内容。 这将适用于所有浏览器。
#6楼
您不能在输入元素中放置伪元素，但是可以像占位符一样放置阴影元素！
input[type="text"] { &::-webkit-input-placeholder {&:before {// your code}}
}
要使其在其他浏览器中工作，请在不同的选择器中使用:-moz-placeholder ， ::-moz-placeholder和:-ms-input-placeholder 。 无法对选择器进行分组，因为如果浏览器无法识别选择器，则会使整个语句无效。
更新 ：上面的代码仅适用于CSS预处理器（SASS，LESS ...），而无需使用预处理器：
input[type="text"]::-webkit-input-placeholder:before { // your code }
#7楼
我发现您可以这样做：
.submit .btn input { padding:11px 28px 12px 14px; background:#004990; border:none; color:#fff; } .submit .btn { border:none; color:#fff; font-family: 'Open Sans', sans-serif; font-size:1em; min-width:96px; display:inline-block; position:relative; } .submit .btn:after { content:">"; width:6px; height:17px; position:absolute; right:36px; color:#fff; top:7px; } <div class="submit"> <div class="btn"> <input value="Send" type="submit" /> </div> </div> 您需要有一个带填充和：after的div父级。 第一个父级必须是相对的，第二个div应该是绝对的，以便您可以设置之后的位置。
#8楼
您必须在输入周围有某种包装，才能使用伪元素之前或之后。 这是一个小提琴，在输入的包装div上具有一个before，然后将其放置在输入中-至少看起来像这样。 显然，这是一种变通方法，但在紧要关头很有效，因此很容易响应。 如果您需要添加其他内容，则可以轻松地进行设置。
工作小提琴
输入中的美元符号作为伪元素： http : //jsfiddle.net/kapunahele/ose4r8uj/1/
HTML：
<div class="test"><input type="text"></input>
</div>
CSS：
input {margin: 3em;padding-left: 2em;padding-top: 1em;padding-bottom: 1em;width:20%;
}.test {position: relative;background-color: #dedede;display: inline;
}.test:before {content: '$';position: absolute;top: 0;left: 40px;z-index: 1;
}
#9楼
:before和:after应用于容器内部，这意味着您可以将其用于带有end标签的元素。
它不适用于自动关闭的元素。
附带说明，自动关闭的元素（例如img / hr / input）也称为“替换元素”，因为它们已被其各自的内容替换。 “外部对象”缺乏更好的用语。 更好的阅读这里
#10楼
这是另一种方法 （假设您可以控制HTML）：在输入之后添加一个空的<span></span> ，并使用input.mystyle + span:after在CSS input.mystyle + span:after
.field_with_errors { display: inline; color: red; } .field_with_errors input+span:after { content: "*" } <div class="field_with_errors">Label:</div> <div class="field_with_errors"> <input type="text" /><span></span> </div> 我在AngularJS中使用这种方法，因为它会将.ng-invalid类自动添加到<input>表单元素和表单中，而不是添加到<label> 。
#11楼
您可以在jQuery父块中使用after或before元素。 像这样：
$(yourInput).parent().addClass("error-form-field");
#12楼
如果尝试使用：before和：after设置输入元素的样式，则很可能是在模仿其他span，div甚至CSS堆栈中的元素的效果。
正如罗伯特·科里特尼克（Robert Koritnik）的答案所指出的那样：：before和：after只能应用于容器元素，而输入元素则不是容器。
但是，HTML 5引入了button元素，它是一个容器，其行为类似于input [type =“ submit | reset”]元素。
<style>.happy:after { content:url(smiley.gif); }</style><form><!-- won't work --><input class="happy" type="submit" value="Submit" /><!-- works --><button class="happy">Submit</button></form>
#13楼
正如其他人所解释的那样， input是有点替换的void元素，因此大多数浏览器不允许您在其中生成::before或::after伪元素。
但是，CSS工作组正在考虑显式地允许::before和::after ，以防input appearance: none 。
从https://lists.w3.org/Archives/Public/www-style/2016Mar/0190.html ，
Safari和Chrome都允许在表单输入中使用伪元素。 其他浏览器则没有。 我们曾考虑删除它，但是使用计数器正在记录使用它的〜.07％页面，这是我们最大删除阈值的20倍。
实际上，在输入上指定伪元素将需要至少指定输入的内部结构，而我们尚未设法做到这一点（我不确定我们可以做到）。 但鲍里斯（Boris）建议，在其中一个bug线程中，允许它出现：无输入-基本上只是将它们转换为<div>，而不是“ kinda替换”元素。
#14楼
尝试下一个：
label[for="userName"] { position: relative; } label[for="userName"]::after { content: '[after]'; width: 22px; height: 22px; display: inline-block; position: absolute; right: -30px; } <label for="userName"> Name: <input type="text" name="userName" id="userName"> </label> #15楼
摘要
它不适用于<input type="button"> ，但是可以很好地与<input type="checkbox"> 。
小提琴 ： http : //jsfiddle.net/gb2wY/50/
HTML ：
<p class="submit"><input id="submit-button" type="submit" value="Post"><br><br><input id="submit-cb" type="checkbox" checked>
</p>
CSS ：
#submit-button::before,
#submit-cb::before {content: ' ';background: transparent;border: 3px solid crimson;display: inline-block;width: 100%;height: 100%;padding: 0;margin: -3px -3px;
}
#16楼
:before和:after仅适用于具有子节点的节点，因为它们会插入一个新节点作为第一个或最后一个节点。
#17楼
:before和:after在容器内渲染
和<input>不能包含其他元素。
伪元素只能在容器元素上定义（或者最好仅支持）。 因为它们的呈现方式在容器本身内作为子元素。 input不能包含其他元素，因此不支持它们。 另一方面，也是表单元素的button支持它们，因为它是其他子元素的容器。
如果您问我，如果某个浏览器的确在非容器元素上显示了这两个伪元素，那是一个错误，并且是非标准的一致性。 规范直接讨论元素的内容...
W3C规格
如果我们仔细阅读说明书 ，它实际上说，他们被插入含有的元素：
作者使用：before和：after伪元素指定生成内容的样式和位置。 顾名思义，：before和：after伪元素指定元素的文档树内容之前和之后的内容位置。 “ content”属性与这些伪元素一起指定了要插入的内容。
看到？ 元素的文档树内容 。 据我了解，这意味着在容器内。
#18楼
纯CSS的可行解决方案：
诀窍是假设文本字段后有一个dom元素。
/* * The trick is here: * this selector says "take the first dom element after * the input text (+) and set its before content to the * value (:before). */ input#myTextField + *:before { content: "
我可以在输入字段上使用：before或：after伪元素吗？相关推荐
- python怎么粘贴字进去_通过python粘贴到输入字段上
我很难找到一个合适的解决方案将我的输入粘贴到输入字段中.我正在使用库Xdo. 我在做什么? Python文件正在后台运行.在 程序从智能卡获取数据.在 返回的数据为数字/英语和泰语.在 然后在浏览器中 ...
- 按钮提交在url后添加字段_在输入字段上定向单击“清除”按钮（X）
按钮提交在url后添加字段 jQuery makes it easy to get your project up and running. Though it's fallen out of fav ...
- html5 规定输入字段,HTML5 Input属性详解
本篇教程探讨了HTML5 Input属性详解,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 . < value 属性 value 属性规定输入字段的初始值: rea ...
- 如何设置对输入字段的关注？
本文翻译自:How to set focus on input field? What is the 'Angular way' to set focus on input field in Angu ...
- cleave.js_使用Cleave.js自动设置输入字段的格式
考虑所有需要格式化结构的不同输入字段. 电话号码,信用卡,生日,街道地址--它们都有自己独特的模式 . 轻松保留这些字段并信任用户非常容易. 但是使用Cleave.js (一个免费的 原始 JavaS ...
- 从输入字段读取属性时，HTML编码丢失
我正在使用JavaScript从隐藏字段中提取值并将其显示在文本框中. 隐藏字段中的值被编码. 例如, <input id='hiddenId' type='hidden' value='cha ...
- SAP UI5 应用开发教程之四十七 - 如何自定义 SAP UI5 字符串类型输入字段的校验逻辑试读版
一套适合 SAP UI5 初学者循序渐进的学习教程 教程目录 SAP UI5 本地开发环境的搭建 SAP UI5 应用开发教程之一:Hello World SAP UI5 应用开发教程之二:SAP U ...
- 如何禁用Web表单字段/输入标签上的浏览器自动完成功能？
如何在主要浏览器中为特定input (或form field )禁用autocomplete ? #1楼 您可以在输入中使用. 例如; <input type=text name="t ...
- 关于django在database或者后台输入字段为Incorrect string value: ‘\xE4\xBD\xA0\xE4\xBC\x9A问题
关于django在database或者后台输入字段为Incorrect string value: '\xE4\xBD\xA0\xE4\xBC\x9A问题 MySQL数据库编码的问题,查了很多, 因为 ...
最新文章
- 分布式系统互斥性与幂等性问题的分析与解决
- 数据回归分析和拟合的Matlab实现
- 从70元到60亿,可以进来看看这篇文章
- 技术管理规划-如何规划团队的架构
- 代码块、final关键字、包、权限修饰符的复习理解
- 微信小程序云函数传递数组_微信小程序云开发一周入门
- C++两种单例(饿汉式,懒汉式)
- Bailian2994 拼装模型【哈夫曼树】
- python和java哪个好找工作-2019年Python、Java、C++学哪个更好？薪资更高？
- 如何使用SpingMvc实现省市县三级级联？
- 循环神经网络 递归神经网络_递归神经网络-第2部分
- 《艾恩ASP文件上传类》开发和使用总结
- Mac电脑网页完整的长截图怎么截
- 让WMP12成为万能播放器
- 记一道字节跳动的算法面试题
- java 缓存的简单实现
- 随机产生10个整数;设计一个算法找其中的最大的元素和最小的元素，并统计元素之间的比较次数
- Python利用qrcode生成二维码并解析结果
- 【Python】pandas的describe参数详解
- nginx公网IP无法访问浏览器
热门文章