用户单击表单文本框时的格式帮助

Posted 2023-03-07

【中文标题】用户单击表单文本框时的格式帮助

【英文标题】：Formatting help when user clicks on form text box

【发布时间】：2014-08-16 14:21:36

【问题描述】：

这里的新手，请温柔。当用户单击表单文本框（如电子邮件或名字）时，文本框边框变为蓝色，并且与静止格式相比，边框更宽。我想改一下，这样当用户点击时，文本框边框不改变颜色和边框宽度，但是文本框背景从浅灰色（#fafafa）变成白色（#ffffff）。

电子邮件服务提供商编写了原始表单代码（他们不提供任何自定义支持），我通过研究 html 修改了内联格式（例如文本框大小、字体属性、圆角、按钮格式等）属性在线，并通过反复试验。

<form id="IBNSubscribeForm" accept-charset="UTF-8" action="">
    <p>Email*<br/><input id="IBNSubscribeEmail" type="text/CSS" name="email" value="" placeholder="[e-mail]" size="34" style="background-color:#fafafa; height:3em; border:1px solid #cccccc; border-radius:4px; -moz-border-radius: 4px "/><p/>
    <p>First name* <br> <input name="first_name" type="text" size="34" style="background-color:#fafafa; height:3em; border:1px solid #cccccc; border-radius:4px; -moz-border-radius: 4px" /><p/>
    <input id="IBNSubscribeButton" type="button" value="SUBSCRIBE!" style="font:Proxima Nova; font-size:13px; letter-spacing: 1px; color: #FFFFFF; font-weight: bold; background-color: #faac44; width: 11em; height: 4em; border-radius:4px; -moz-border-radius: 4px; border:none">
    <span id="IBNStatusMessage"></span>
</form>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
function isValidEmailAddress(emailAddress) 
var pattern = /^([a-zA-Z0-9])(([a-zA-Z0-9])*([._+-])*([a-zA-Z0-9]))*@(([a-zA-Z0-9-])+(.))+([a-zA-Z]2,4)+$/;
return pattern.test(emailAddress);

(function($) 
    $.fn.EmailCampaignsSubscribe = function(client_id, lists, opt)
var defaults = 
form: "IBNSubscribeForm",
email: "IBNSubscribeEmail",
            msg: "IBNStatusMessage",
            button: "IBNSubscribeButton",
            successMsg: "Thank you for signing up!",
            emailValidation: true,
            errorMsg: "Oops...please check your email address"
        ;
        var opt = $.extend(defaults, opt);
        $("#"+opt.button).click(function()
        var valid = true;
        if(opt.emailValidation)
if(!isValidEmailAddress($("#"+opt.email).val()))

valid = false;

            
    if(valid)
var data = $("#"+opt.form).serialize();
var img = "";
for (i in lists)
    img += "<img style='display:none;' src='http://server1.emailcampaigns.net/autoadd/?c="+client_id+"&"+data+"&lid="+lists[i]+"'>";
    
    $("#"+opt.form).html(opt.successMsg + img);
        else
        $("#"+opt.msg).html(opt.errorMsg);
        
        );
    ;
)(jQuery);
</script>
<script type="text/javascript">jQuery.fn.EmailCampaignsSubscribe(a00000a,[3]);</script>

【问题讨论】：

请修正缩进。

我将第一行与左边距对齐。如果还有其他缩进问题，那就是源代码格式化的方式。我没有修复它的知识。

【参考方案1】：

试试这个：

input[type=text] 
    background-color: #FAFAFA;
    border: 1px solid #ccc;


input[type=text]:focus 
    background-color: #FFFFFF;
    border: 1px solid #ccc;

你也可以用 javascript 做一些事情，但想让它对你来说很简单。

JSFiddle：

http://jsfiddle.net/3kN8F/1/

注意：我在这里使用红色来更好地为您演示:)

【讨论】：

谢谢；我无法让它工作 - 鉴于我提供的代码，新代码在哪里？

你可以把它放在 标签之间，在你页面的任何地方，为了方便 :)

在w3schools.com/css/css_howto.asp 阅读更多内容。我告诉过你内部样式表部分。因此，请阅读该部分以获取更多信息:)。

【参考方案2】：

将其放在文档中的任何位置：

<style>
    [type="text"], [type="email"]
        background:#fafafa !important;
        height:3em important; 
        border:1px solid #cccccc important; 
        border-radius:4px important; 
        -moz-border-radius: 4px important;
    
    [type="text"]:focus, [type="email"]:focus
        background:#ffffff !important;
        height:3em !important;
        border:1px solid #cccccc !important;
        border-radius:4px !important;
        -moz-border-radius: 4px !important;
    
</style>

Example 在示例中，未聚焦时背景为红色，因此您可以看到差异。 通过将 background:red !important; 替换为 background:white !important; 来更改它 您还可以使用以下编码使焦点淡入：

 <style>
            [type="text"], [type="email"]
                background:#fafafa !important;
                height:3em important; 
                border:1px solid #cccccc important; 
                border-radius:4px important; 
                -moz-border-radius: 4px important;
                -moz-border-radius: 4px;
                -moz-border-radius: 4px
                -o-transition:.5s;
                -ms-transition:.5s;
                -moz-transition:.5s ;
                -webkit-transition:.5s;
                 transition:.5s  ;

            
            [type="text"]:focus, [type="email"]:focus
                background:#ffffff !important;
                height:3em !important;
                border:1px solid #cccccc !important;
                border-radius:4px !important;
                -moz-border-radius: 4px !important;
            
        </style>

Example of fade

希望这会有所帮助！

【讨论】：

谢谢；我尝试粘贴两个示例中的第一个，但无法正常工作。我知道您在文档中的任何地方都说过，但是您的代码是否需要在特定的 HTML 标记中？

:focus 不能在 html 标签内。你网站的网址是什么？你可能有一些压倒一切的编码。

这是一个 SquareSpace 网站，尚未上线。我会在他们的用户论坛上询问添加 CSS 代码的最佳方式。

好的，Follow this tutorial。将上面的代码复制到