Question

我有一个简单的表单，允许用户向网站所有者发送邮件。我不想完全改变它，因为我已经为此编写了PHP脚本，这个解决方案在我尝试添加一些样式之前工作正常......

问题是，“Wyślij＆gt;” （提交）在textarea内部仅在firefox中不起作用。我无法点击它，就像按钮位于下方某处。在Opera，Chrome，Edge，IE中 - 它运行得很好。我开始放弃这个了。我很感激任何帮助，我不知道是什么导致了这一点。

JSFiddle：http://jsfiddle.net/c0vz64m1/

HTML code：

<form method="post" action="kontakt.php" id="contactform" style="margin-left:35vw; margin-top:20px;">
            <label for="name">Imię<font color="white">*</font>:</label><br>
            <input type="text" name="name" id="name" placeholder=" Twoje imię (wymagane)" required /><br>

            <label for="email">Email<font color="white">*</font>:</label><br>
            <input type="text" name="email" id="email" placeholder=" Twój email (wymagane)" required />

            <div id="text-area">
            <label for="message">Wiadomość<font color="white">*</font>:</label><br>
            <textarea name="message" rows="9" cols="50" id="message" placeholder=" Twoja wiadomość (wymagane)" equired></textarea>


            <input type="submit" name="submit" value="Wyślij &raquo;" class="submit-button"/></div>
        </form>

CSS：

    input#name,input#email {
    box-shadow:0px 0px 10px skyblue;
    border:2px solid skyblue;
    border-radius:7px;
    padding-left:5px;
    transition:all .2s ease-in-out;
}

input#name:focus,input#email:focus {
    box-shadow:0px 0px 20px skyblue;
    transition:all .2s ease-in-out;
}

input#name:hover,input#email:hover {
    box-shadow:0px 0px 20px skyblue;
}

.submit-button {
    width:75px;
    height:36px;
    margin-left:380px;
    display:block;
    margin-top:-41px;
    border-top:2px solid blue;
    z-index:5000;
    font-size:14pt;
    color:skyblue;
    font-family:Andada;
}

textarea {
    box-shadow:0px 0px 10px skyblue;
    border:2px solid skyblue;
    border-radius:10px;
    resize:none;
    height:150px;
    width:375px;
    z-index:1;
    padding-right:75px;
    transition:all .2s ease-in-out;
}

textarea:focus {
    box-shadow:0px 0px 20px skyblue;
    transition:all .2s ease-in-out;
}

textarea:hover {
    box-shadow:0px 0px 20px skyblue;
}

Answer 1

使用绝对定位将按钮放在textarea上，它将起作用。

从班级.submit-button移除这些内容：

margin-left:380px;
margin-top:-41px;

并添加以下内容：

position:absolute;
right: 0;
bottom: 30px;

然后将position:relative添加到#text-area。

Answer 2

请参阅更新的小提琴：http://jsfiddle.net/w86o8hhh/，其中添加：

  z-index:10;

到CSS，并且：

  id="submit"

到提交按钮

在textarea中输入“submit”，在Firefox中无法点击

2 个答案: