Html 围绕按钮的恼人的线条？_Html_Css_Forms_Button_Border

Html 围绕按钮的恼人的线条？

html css forms button

Html 围绕按钮的恼人的线条？,html,css,forms,button,border,Html,Css,Forms,Button,Border,我正在为我的登录表单设计一个按钮，这时我意识到在我的按钮周围有一条恼人的方形“边界线”。我真的很想摆脱这个以下是html： $(function(){ var $form_inputs = $('form input'); var $rainbow_and_border = $('.rain, .border'); /* Used to provide loping animations in fallback mode */ $form_i

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

以下是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>

下面是它的外观：

您有两个问题：

在按钮元素中嵌套输入是不允许的，也是没有意义的
尝试最后关闭第一个打开的标记。
- 比如：
  不是：
- 许多浏览器在这种情况下呈现页面时不会出错，但避免这样做

试试这个

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


电子邮件
密码

不能在按钮中嵌套输入。只写一个就足够了。非常感谢你，这解决了我的问题

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