-1
所以我正在使用HTML和CSS製作一個簡單的用戶輸入表單。我在網上發現了一個很好的CSS表單設計，並決定將其適用於我的表單。當我刪除一些不必要的類時，我的HTML頁面不需要CSS的選擇器，我注意到CSS沒有應用在我的Submit按鈕上。如果我保留額外的類，即使它是空的按鈕的CSS被應用，但如果我完全刪除它然後按鈕CSS失敗？爲什麼我的CSS需要一些額外無用的代碼來運行
從網站，我得到了CSS可以在這裏找到的原代碼，形式風格5時：Form Style 5
div{
max-width: 500px;
background: #f4f7f8;
padding: 20px;
background: #f4f7f8;
border-radius: 8px;
font-family: Georgia,"Times New Roman",Times,serif;
}
form{
display: inline-block;
}
.form-style-5{
max-width: 250px;
background: #f4f7f8;
padding: 20px;
background: #f4f7f8;
border-radius: 8px;
font-family: Georgia,"Times New Roman",Times,serif;
margin: 0 auto;
}
.form-style-5 fieldset{
max-width: 500px;
background: #f4f7f8;
padding: 0;
background: #f4f7f8;
border-radius: 8px;
font-family: Georgia,"Times New Roman",Times,serif;
border: none;
}
.form-style-5 legend {
font-size: 1.4em;
margin-bottom: 10px;
text-align: center;
color: #717171;
border: 0;
}
.form-style-5 label {
display: block;
margin-bottom: 8px;
}
.form-style-5 input[type="text"],
.form-style-5 input[type="number"]{
font-family: Georgia, "Times New Roman", Times, serif;
background: rgba(255,255,255,.1);
border: none;
border-radius: 4px;
font-size: 16px;
margin: 0;
outline: 0;
padding: 7px;
width: 100%;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
background-color: #e8eeef;
color:#8a97a0;
-webkit-box-shadow: 0 1px 0 rgba(0,0,0,0.03) inset;
box-shadow: 0 1px 0 rgba(0,0,0,0.03) inset;
margin-bottom: 30px;
}
.form-style-5 input[type="text"]:focus,
.form-style-5 input[type="number"]:focus
{
background: #d2d9dd;
/*outline: none;
border-color: #9ecaed;
box-shadow: 0 0 10px #9ecaed;*/
background: #1abc9c;
color: #fff;
height: 30px;
width: 30px;
display: inline-block;
font-size: 0.8em;
margin-right: 4px;
line-height: 30px;
text-align: center;
text-shadow: 0 1px 0 rgba(255,255,255,0.2);
border-radius: 15px 15px 15px 0px;
}
.form-style-5 select{
/*Removing this name selector causes the below button class selector CSS to not be applied?*/
}
.form-style-5 input[type="submit"],
.form-style-5 input[type="button"]
{
position: relative;
display: block;
padding: 19px 39px 18px 39px;
color: #FFF;
margin: 0 auto;
background: #1abc9c;
font-size: 18px;
text-align: center;
font-style: normal;
width: 100%;
border: 1px solid #16a085;
border-width: 1px 1px 3px;
margin-bottom: 10px;
}
.form-style-5 input[type="submit"]:hover,
.form-style-5 input[type="button"]:hover
{
background: #109177;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="UserInput_CSS.css">
<script type="text/javascript">
function validateForm() {
alert("I am called");
var fname = document.myForm.fname.value;
var lname = document.myForm.lname.value;
var age = document.myForm.age.value;
//var expr = new RegExp(/^[a-zA-Z]+$/g);
var expr = /^[a-zA-Z]+$/m;
if(fname == "" || !isNaN(fname) || !expr.test(fname)) // || fname == NULL || fname== "(null)", !fname.match(expr)
{
alert("Please enter proper First Name");
document.myForm.fname.focus() ;
return false;
}
if(lname == "" || !isNaN(lname) || !expr.test(lname)) // || lname == NULL || lname== "(null)", !lname.match(expr), !/^[a-zA-Z]+$/g.test(lname), !expr.test(lname)
{
alert("Please enter proper Last Name");
document.myForm.lname.focus() ;
return false;
}
if(age == "" || age == 0 || age<0 || age >122 || isNaN(age))
{
alert("Please enter proper Age");
document.myForm.age.focus() ;
return false;
}
return true;
}
</script>
</head>
<body>
<div class="form-style-5">
<form name="myForm" action="/itrade/user/CGI_Test.exe?action=submt" method="post" onsubmit="return validateForm();"> <!--onsubmit="return validateForm()"-->
<fieldset>
<legend>Candidate Info</legend>
First Name: <input type="text" name="fname" placeholder="First Name *"><br>
Last Name: <input type="text" name="lname" placeholder="Last Name *"><br>
Age: <input type="text" name="age" placeholder="Age *"><br>
<input type="submit" value="submit"> <!--onclick = "return validateForm();"-->
</fieldset>
</form>
</div>
</body>
</html>
您需要製作一個plunkr來展示您的問題。將一堆CSS傾倒在我們身上，期待我們挖掘它並不是獲得幫助的方式。 https://plnkr.co/edit/ –
這是由於'.form-style-5 input [type =「text」]中額外的關閉'}'：focus，.form-style-5 input [type = 「數量」]：focus'。打算將問題作爲印刷錯誤進行投票。 –
你的CSS有額外的大括號（看'.form-style-5 select'上面的部分）。這是故意還是複製粘貼錯誤？ – Becuzz