使用CSS爲textarea的「required」屬性設置樣式不起作用

Question

我已將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">&nbsp;</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>&nbsp;</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>&nbsp;</td> 
    <td>Email</td> 
    <td><input class="input-small" type="email" placeholder="e.g. you@your.mail" required></td> 
    </tr> 
    <tr> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
    <td>Email- Again</td> 
    <td><input class="input-small" type="email" placeholder="again" required></td> 
    </tr> 
    <tr> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
    <td>Emergency Contact</td> 
    <td rowspan="3"><textarea name="emergency" rows="5" placeholder="Emergency" required="required"></textarea> 
&nbsp;  &nbsp;</td> 
    </tr> 
    <tr> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
    </tr> 
    <tr> 
    <td>Postcode</td> 
    <td><input class="input-small1" type="text" placeholder="WA1 3DE"></td> 
    <td>&nbsp;</td> 
    <td>&nbsp;</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; 
} 

我已經應用了相同的規則，所有的人我有textarea的無果的其他投入。

Answer 1

我沒有真正設置測試這個，但我相當肯定這應該可以解決您的問題。它不在textarea上工作的原因是因爲你的CSS只查找輸入標籤而不是textarea標籤。在這裏你有input:valid和input:invalid

input:required:invalid, input:focus:invalid, 
textarea:required:invalid, textarea: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, 
textarea: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; 
}