如何使用内联背景颜色样式设置窗体输入字段的样式
How To Style Form Input Fields With Inline Background Color Style
我有一个表单,当我点击表单内部时,我想用特定的背景色来设置输入字段的样式。然而,我在这方面遇到了一些麻烦。这是我所拥有的:
<form name="" action="/communicate/#wpcf7-f11-o1" method="post" class="wpcf7-form" novalidate="novalidate">
<div style="display: none;">
<input type="hidden" name="_wpcf7" value="11" /><br />
<input type="hidden" name="_wpcf7_version" value="4.0" /><br />
<input type="hidden" name="_wpcf7_locale" value="" /><br />
<input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f11-o1" /><br />
<input type="hidden" name="_wpnonce" value="d6b53e1ecd" />
</div>
<p style="color: #fff;">Your Name (required)<br />
<span class="wpcf7-form-control-wrap your-name"><input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" /></span>
</p>
<p style="color: #fff;">Your Email (required)<br />
<span class="wpcf7-form-control-wrap your-email"><input type="email" name="your-email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" aria-required="true" aria-invalid="false" /></span>
</p>
<p style="color: #fff;">Subject<br />
<span class="wpcf7-form-control-wrap your-subject"><input type="text" name="your-subject" value="" size="40" class="wpcf7-form-control wpcf7-text" aria-invalid="false" /></span>
</p>
<p style="color: #fff;">Your Message<br />
<span class="wpcf7-form-control-wrap your-message"><textarea name="your-message" cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea" aria-invalid="false"></textarea></span>
</p>
<p><input type="submit" value="Send" class="wpcf7-form-control wpcf7-submit" /></p>
<div class="wpcf7-response-output wpcf7-display-none"></div>
</form>
我想在选择时将输入字段设置为黑色。我也想要一种叠加样式,但我稍后会处理。有人能帮忙吗?我没有编写CSS规则的奢侈,因为我正在从某人古怪的WordPress网站上拼凑一个破碎的表单。难道不会在<span>
标签中进行更改吗?我将字段名称设置为与#fff
内联,并希望使用#000
进行输入。谢谢
您可以将其添加到您的CSS:中
input:focus, textarea:focus {
background: black;
color: white;
}
更新:
您可以在<input>
标签和<textarea>
标签中添加以下代码:
onclick="this.style.backgroundColor='black';this.style.color='white'" onblur="this.style.backgroundColor='white';this.style.color='black'"
像这样:
<input type="text" onclick="this.style.backgroundColor='black';this.style.color='white'" onblur="this.style.backgroundColor='white';this.style.color='black'" name="your-subject" value="" size="40" class="wpcf7-form-control wpcf7-text" aria-invalid="false">
<form name="" action="/communicate/#wpcf7-f11-o1" method="post" class="wpcf7-form" novalidate="novalidate">
<div style="display: none;">
<input type="hidden" name="_wpcf7" value="11" /><br />
<input type="hidden" name="_wpcf7_version" value="4.0" /><br />
<input type="hidden" name="_wpcf7_locale" value="" /><br />
<input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f11-o1" /><br />
<input type="hidden" name="_wpnonce" value="d6b53e1ecd" />
</div>
<p style="color: #fff;">Your Name (required)<br />
<span class="wpcf7-form-control-wrap your-name"><input onclick="this.style.backgroundColor='black';this.style.color='white'" onblur="this.style.backgroundColor='white';this.style.color='black'" type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" /></span>
</p>
<p style="color: #fff;">Your Email (required)<br />
<span class="wpcf7-form-control-wrap your-email"><input onclick="this.style.backgroundColor='black';this.style.color='white'" onblur="this.style.backgroundColor='white';this.style.color='black'" type="email" name="your-email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" aria-required="true" aria-invalid="false" /></span>
</p>
<p style="color: #fff;">Subject<br />
<span class="wpcf7-form-control-wrap your-subject"><input onclick="this.style.backgroundColor='black';this.style.color='white'" onblur="this.style.backgroundColor='white';this.style.color='black'" type="text" name="your-subject" value="" size="40" class="wpcf7-form-control wpcf7-text" aria-invalid="false" /></span>
</p>
<p style="color: #fff;">Your Message<br />
<span class="wpcf7-form-control-wrap your-message"><textarea onclick="this.style.backgroundColor='black';this.style.color='white'" onblur="this.style.backgroundColor='white';this.style.color='black'" name="your-message" cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea" aria-invalid="false"></textarea></span>
</p>
<p><input type="submit" value="Send" class="wpcf7-form-control wpcf7-submit" /></p>
<div class="wpcf7-response-output wpcf7-display-none"></div>
</form>
如果您想更改大纲,请查看css outline属性。
input:focus, textarea:focus{
outline: #00FF00 dotted thick;
}
我准备好了,你不能写css文件,所以你可以像这个一样使用jquery
$(":input").focus(function(){
$(this).css("background","green");
$(this).focusout(function(){
$(this).css("background","");
});
});
这是一个JSFIDDLE,显示它在中的作用
EDIT在看到billy关于你不能使用jquery的帖子后,这里有一个简单的javascript函数可以做到这一点。
<input type="text" id="demoinput" onfocus="demoFocus(this.id)" onfocusout="demoFocusout(this.id)">
<script>
function demoFocus(x) {
document.getElementById(x).style.background = "yellow";
}
function demoFocusout(x) {
document.getElementById(x).style.background = "";
}
</script>
和这种方式的JSFIDDLE
相关文章:
- 对插件初始化后动态加载的元素进行样式设置
- 使用jQuery按条件将样式设置为html标记
- 将 href 样式设置为按钮
- 如何以类似于vivus.js的样式设置SVG填充和路径的动画
- 根据用户输入声明样式设置
- 更改:在使用Javascript进行样式设置之前
- 反应:使用内联样式设置所有元素的样式
- 在AngularJS中构建SPA应用程序与纯JavaScript - 选择哪种Boostrap进行样式设置
- 我将如何使用CSS3对动态创建的jQuery UI元素进行样式设置
- Tumblr JS嵌入CSS/HTML标签进行样式设置
- 如何使用 ng 样式设置元素宽度 % 的样式
- 如何使用 Web 浏览器控件进行样式设置,但具有 C# 中的逻辑
- 从 javascript 获取样式设置时出现问题
- 样式设置 jQuery 验证错误消息
- 使用 React-Toolbox 的按钮进行样式设置不起作用
- 如何将离子输入类型文件的样式设置为按钮
- 如何将加载到<对象>中的元素样式设置为数据
- CKEDITOR没有't对来自数据库的文本进行样式设置
- 如何对一个元素进行ng样式设置's$索引由ng repeat创建
- D3可以't将样式设置为带标题的对象