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

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

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

<form id="IBNSubscribeForm" accept-charset="UTF-8" action="">
    <p>Email*<br/><input id="IBNSubscribeEmail" type="text/CSS" name="email" value="" placeholder="name@xyz.com" 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>

电子邮件*

名字*

函数isValidEmailAddress（电子邮件地址）{
变量模式=/^（[a-zA-Z0-9]）（[a-zA-Z0-9]）*（[.+-]）*（[a-zA-Z0-9]）*@（[a-zA-Z0-9-]）+（）+（）+（[a-zA-Z]{2,4}）+$/；
返回模式.test（emailAddress）；
}
（函数（$）{
$.fn.EmailActivationsSubscribe=函数（客户端id、列表、选项）{
var默认值={
表格：“IBNSubscribeForm”，
电子邮件：“IBNSubscribeEmail”，
消息：“IBNStatusMessage”，
按钮：“ibnsubscribe按钮”，
Successsg：“感谢您的注册！”，
电子邮件验证：对，
errorMsg：“哦…请检查您的电子邮件地址”
};
var opt=$.extend（默认值，opt）；
$（“#”+选项按钮）。单击（函数（）{
var valid=true；
如果（选择电子邮件验证）{
如果（！isValidEmailAddress（$（“#”+opt.email）.val（））
{
有效=错误；
}
}
如果（有效）{
var data=$（“#”+opt.form）.serialize（）；
var img=“”；
对于（列表中的i）{
img+=”；
}
$（“#”+opt.form）.html（opt.successsg+img）；
}否则{
$（“#”+opt.msg）.html（opt.errorMsg）；
}
});
};
})（jQuery）；
jQuery.fn.EmailActivationsSubscribe（a00000a[3]）；

试试这个：

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

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

您也可以使用javascript做一些事情，但希望保持简单

JSFiddle：

---

注意：我在这里使用红色是为了更好地向您演示：）

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

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

---

希望这有帮助

请把缩进处补好。我把第一行和左边距对齐了。如果还有其他缩进问题，那就是源代码的格式化方式。我没有知识去修复它。谢谢你；我很难做到这一点-考虑到我提供的代码，新代码会去哪里？你可以把它放在页面上任何地方的insert my css here标签之间，以方便阅读：）更多信息。我告诉过你内部样式表部分。因此，请阅读该部分了解更多信息：）。谢谢；我试着粘贴两个示例中的第一个，但无法使其正常工作。我知道你在文档中提到了任何地方，但是你的代码需要在特定的HTML标记中吗？：焦点不能在HTML标记中。你网站的url是什么？你可能有一些覆盖性的编码。这是一个SquareSpace网站，还没有上线。我会在他们的用户论坛上询问添加CSS代码的最佳方式。将上面的编码复制到标记中，不要复制样式标记，然后将其粘贴到css的底部。如果这不起作用，你可以发布你的网站，然后我可以引导你一步一步地完成它。

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