Question

新手在这里，请保持温柔。当用户单击表单文本框（如电子邮件或名字）时，文本框边框将变为蓝色，并且边框与其静态格式相比更宽。我想更改它，以便当用户单击时，文本框边框不会更改颜色和边框宽度，但文本框背景从浅灰色（#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>

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

注意：我在这里使用红色来更好地展示它：）

Answer 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

希望这有帮助！

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

2 个答案: