Question

当我意识到我的按钮周围有一条恼人的方形“边框线”时，我正在为我的登录表单设计一个按钮。我真的想摆脱这个..

这是html：

$(function(){
      var $form_inputs =   $('form input');
      var $rainbow_and_border = $('.rain, .border');
      /* Used to provide loping animations in fallback mode */
      $form_inputs.bind('focus', function(){
        $rainbow_and_border.addClass('end').removeClass('unfocus start');
      });
      $form_inputs.bind('blur', function(){
        $rainbow_and_border.addClass('unfocus start').removeClass('end');
      });
      $form_inputs.first().delay(800).queue(function() {
        $(this).focus();
      });
    });
</script>
    <style>

    </style>
</head>
<body id="home">
    <div class="rain">
        <div class="border start">
            <form>
                <label for="email">Email</label>
                <input name="email" type="text" placeholder="Email"/>
                <label for="pass">Password</label>
                <input name="pass" type="password" placeholder="Password"/>
                </div>
                                  <button class="button"> <input type="submit" value="LOG IN"/> </button> 
            </form>

    </div>

以下是整个Login表单的CSS，以防它有用：

.border,
        .rain{
            height: 165px;
            width: 320px;
            float: right;
        }
        /* Layout with mask */
        .rain{
             padding: 0 0 4px 0;
             -moz-box-shadow: 10px 10px 10px rgba(0,0,0,1) inset, -9px -9px 8px rgba(0,0,0,1) inset;
             -webkit-box-shadow: 8px 8px 8px rgba(0,0,0,1) inset, -9px -9px 8px rgba(0,0,0,1) inset;
             box-shadow: 8px 8px 8px rgba(0,0,0,1) inset, -9px -9px 8px rgba(0,0,0,1) inset;
             margin: 0 0 140px 0 auto;
              position:relative;

  bottom: 130px;
        }
        /* Artifical "border" to clear border to bypass mask */
        .border{
            padding: 1px;
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
            border-radius: 5px;
        }

        .border,
        .rain,
        .border.start,
        .rain.start{
            background-repeat: repeat-x, repeat-x, repeat-x, repeat-x;
            background-position: 0 0, 0 0, 0 0, 0 0;
            /* Blue-ish Green Fallback for Mozilla */
            background-image: -moz-linear-gradient(left, #09BA5E 0%, #00C7CE 15%, #3472CF 26%, #00C7CE 48%, #0CCF91 91%, #09BA5E 100%);
            /* Add "Highlight" Texture to the Animation */
            background-image: -webkit-gradient(linear, left top, right top, color-stop(1%,rgba(0,0,0,.3)), color-stop(23%,rgba(0,0,0,.1)), color-stop(40%,rgba(255,231,87,.1)), color-stop(61%,rgba(255,231,87,.2)), color-stop(70%,rgba(255,231,87,.1)), color-stop(80%,rgba(0,0,0,.1)), color-stop(100%,rgba(0,0,0,.25)));
            /* Starting Color */
            background-color: #39f;
            /* Just do something for IE-suck */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00BA1B', endColorstr='#00BA1B',GradientType=1 );
        }

        /* Non-keyframe fallback animation */
        .border.end,
        .rain.end{
            -moz-transition-property: background-position;  
            -moz-transition-duration: 30s;
            -moz-transition-timing-function: linear;
            -webkit-transition-property: background-position;  
            -webkit-transition-duration: 30s;  
            -webkit-transition-timing-function: linear;
            -o-transition-property: background-position;  
            -o-transition-duration: 30s;  
            -o-transition-timing-function: linear;
            transition-property: background-position;  
            transition-duration: 30s;  
            transition-timing-function: linear;
            background-position: -5400px 0, -4600px 0, -3800px 0, -3000px 0;    
        }

        /* Keyfram-licious animation */
        @-webkit-keyframes colors {
            0% {background-color: #39f;}
            15% {background-color: #F246C9;}
            30% {background-color: #4453F2;}
            45% {background-color: #44F262;}
            60% {background-color: #F257D4;}
            75% {background-color: #EDF255;}
            90% {background-color: #F20006;}
            100% {background-color: #39f;}
        }
        .border,.rain{
            -webkit-animation-direction: normal;
            -webkit-animation-duration: 20s;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-name: colors;
            -webkit-animation-timing-function: ease;
        }

        /* In-Active State Style */
        .border.unfocus{
            background: #333 !important;    
             -moz-box-shadow: 0px 0px 15px rgba(255,255,255,.2);
             -webkit-box-shadow: 0px 0px 15px rgba(255,255,255,.2);
             box-shadow: 0px 0px 15px rgba(255,255,255,.2);
             -webkit-animation-name: none;
        }
        .rain.unfocus{
            background: #000 !important;    
            -webkit-animation-name: none;
        }

        /* Regular Form Styles */
        form{
            background: #212121;
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
            border-radius: 5px;
            height: 100%;
            width: 100%;
            background: -moz-radial-gradient(50% 46% 90deg,circle closest-corner, #242424, #090909);
            background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 150, from(#242424), to(#090909));
        }
        form label{
            display: block;
            padding: 5px 5px 5px 10px;
            font-size: 11px;
            color: #777;
        }
        form input{
            display: block;
            margin: 5px 5px 15px 10px;
            width: 85%;
            background: #111;
            -moz-box-shadow: 0px 0px 4px #000 inset;
            -webkit-box-shadow: 0px 0px 4px #000 inset;
            box-shadow: 0px 0px 4px #000 inset;
            outline: 1px solid #333;
            border: 1px solid #000;
            padding: 5px;
            color: #444;
            font-size: 16px;
        }
        form input:focus{
            outline: 1px solid #555;
            color: #FFF;
        }
        input[type="submit"]{
            color: #999;
            padding: 5px 5px;
            float: right;
            margin: 5px 0;
            font-weight: lighter;
            -moz-border-radius: 40px;
            -webkit-border-radius: 40px;
            border-radius: 40px;
            background: #45484d;
            background: -moz-linear-gradient(top, #222 0%, #111 100%);
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#222), color-stop(100%,#111));
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#22222', endColorstr='#11111',GradientType=0 );
            -moz-box-shadow: 0px 1px 1px #000, 0px 1px 0px rgba(255,255,255,.3) inset;
            -webkit-box-shadow: 0px 1px 1px #000, 0px 1px 0px rgba(255,255,255,.3) inset;
            box-shadow: 0px 1px 1px #000,0px 1px 0px rgba(255,255,255,.3) inset;
            text-shadow: 0 1px 1px #000;
            border: none;
            outline: none;
        }

.button {
background-color: #170a6e
}

这是它的样子：

enter image description here

Answer 1

您有两个问题：

不允许将输入嵌套在按钮元素中也没有意义。
尝试最后关闭第一个打开的标记。
- 赞：<div><form></form></div>不是：<div><form></div></form>
- 许多浏览器在这种情况下渲染页面时没有错误，但要避免这样做。

试试这个。

<div class="rain">
        <div class="border start">
            <form>
                <label for="email">Email</label>
                <input name="email" type="text" placeholder="Email"/>
                <label for="pass">Password</label>
                <input name="pass" type="password" placeholder="Password"/>

                <input type="submit" value="LOG IN"/> 
            </form>
        </div>
    </div>

恼人的线绕着一个按钮？

1 个答案: