Я добавил свои входные данные, имя, адрес электронной почты и т. д. с атрибутом required
и предоставил через CSS значки, которые отлично обозначают недействительный / подтвержденный статус. Однако тот же стиль не будет вставлять значки в две текстовые области моей формы?
Я видел, что должен удалить все пробелы между тегами, я уверен, что у меня есть, но это не решило эту проблему.
<form id="from">
<table width="742" border="0">
<caption>
<h1>Your details</h1>
<br>
</caption>
<tr>
<td width="117">First Name</td>
<td width="161"><input class="input-small" type="text" placeholder="" required></td>
<td width="29"> </td>
<td width="242">Date of Birth</td>
<td width="171"><input class="input-small" type="text" placeholder="eg. 01/05/1975" required></td>
</tr>
<tr>
<td>Surname</td>
<td><input class="input-small" type="text" placeholder="" required></td>
<td> </td>
<td>Phone</td>
<td><input class="input-small" type="text" placeholder=""></td>
</tr>
<tr>
<td>Address</td>
<td rowspan="4"><textarea rows="5" class="input-mini" placeholder="Full Postal Address" required></textarea></td>
<td> </td>
<td>Email</td>
<td><input class="input-small" type="email" placeholder="e.g. [email protected]" required></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td>Email- Again</td>
<td><input class="input-small" type="email" placeholder="again" required></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td>Emergency Contact</td>
<td rowspan="3"><textarea name="emergency" rows="5" placeholder="Emergency" required="required"></textarea>
</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Postcode</td>
<td><input class="input-small1" type="text" placeholder="WA1 3DE"></td>
<td> </td>
<td> </td>
</tr>
</table>
<br>
<br>
<br>
<label class="checkbox inline">
<input type="checkbox" id="inlineCheckbox1" value="option1"> Option
</label>
<label class="checkbox inline">
<input type="checkbox" id="inlineCheckbox2" value="option2"> Option
</label>
<label class="checkbox inline">
<input type="checkbox" id="inlineCheckbox3" value="option3"> Option
</label>
</form>
CSS это:
@charset "utf-8";
#from {
position: relative;
left: 200px;
}
.input-small1 {
width: 60px;
}
body {
background-color:#BAFCFA;
}
input:required:invalid, input:focus:invalid {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAeVJREFUeNqkU01oE1EQ/mazSTdRmqSxLVSJVKU9RYoHD8WfHr16kh5EFA8eSy6hXrwUPBSKZ6E9V1CU4tGf0DZWDEQrGkhprRDbCvlpavan3ezu+LLSUnADLZnHwHvzmJlvvpkhZkY7IqFNaTuAfPhhP/8Uo87SGSaDsP27hgYM/lUpy6lHdqsAtM+BPfvqKp3ufYKwcgmWCug6oKmrrG3PoaqngWjdd/922hOBs5C/jJA6x7AiUt8VYVUAVQXXShfIqCYRMZO8/N1N+B8H1sOUwivpSUSVCJ2MAjtVwBAIdv+AQkHQqbOgc+fBvorjyQENDcch16/BtkQdAlC4E6jrYHGgGU18Io3gmhzJuwub6/fQJYNi/YBpCifhbDaAPXFvCBVxXbvfbNGFeN8DkjogWAd8DljV3KRutcEAeHMN/HXZ4p9bhncJHCyhNx52R0Kv/XNuQvYBnM+CP7xddXL5KaJw0TMAF8qjnMvegeK/SLHubhpKDKIrJDlvXoMX3y9xcSMZyBQ+tpyk5hzsa2Ns7LGdfWdbL6fZvHn92d7dgROH/730YBLtiZmEdGPkFnhX4kxmjVe2xgPfCtrRd6GHRtEh9zsL8xVe+pwSzj+OtwvletZZ/wLeKD71L+ZeHHWZ/gowABkp7AwwnEjFAAAAAElFTkSuQmCC);
background-position: right top;
background-repeat: no-repeat;
-moz-box-shadow: none;
}
input:required:valid {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAepJREFUeNrEk79PFEEUx9/uDDd7v/AAQQnEQokmJCRGwc7/QeM/YGVxsZJQYI/EhCChICYmUJigNBSGzobQaI5SaYRw6imne0d2D/bYmZ3dGd+YQKEHYiyc5GUyb3Y+77vfeWNpreFfhvXfAWAAJtbKi7dff1rWK9vPHx3mThP2Iaipk5EzTg8Qmru38H7izmkFHAF4WH1R52654PR0Oamzj2dKxYt/Bbg1OPZuY3d9aU82VGem/5LtnJscLxWzfzRxaWNqWJP0XUadIbSzu5DuvUJpzq7sfYBKsP1GJeLB+PWpt8cCXm4+2+zLXx4guKiLXWA2Nc5ChOuacMEPv20FkT+dIawyenVi5VcAbcigWzXLeNiDRCdwId0LFm5IUMBIBgrp8wOEsFlfeCGm23/zoBZWn9a4C314A1nCoM1OAVccuGyCkPs/P+pIdVIOkG9pIh6YlyqCrwhRKD3GygK9PUBImIQQxRi4b2O+JcCLg8+e8NZiLVEygwCrWpYF0jQJziYU/ho2TUuCPTn8hHcQNuZy1/94sAMOzQHDeqaij7Cd8Dt8CatGhX3iWxgtFW/m29pnUjR7TSQcRCIAVW1FSr6KAVYdi+5Pj8yunviYHq7f72po3Y9dbi7CxzDO1+duzCXH9cEPAQYAhJELY/AqBtwAAAAASUVORK5CYII=);
background-position: right top;
background-repeat: no-repeat;
-moz-box-shadow: none;
}
:invalid {
box-shadow: none;
}
:-moz-submit-invalid {
box-shadow: none;
}
:-moz-ui-invalid {
box-shadow:none;
}
Я применил те же правила ко всем другим вводам, которые у меня есть с текстовой областью, но безрезультатно.