Question

所以，我有一个<input>元素，其中包含CSS的:focus属性。

CSS

#my_input {
border: 1px solid black;
}

#my_input:focus {
border: 1px solid green;
}

此输入用于登录表单。如果用户对表单出错，比如输入少于最小字符，则输入表单的边框为红色。一旦错误得到修复，我希望边框恢复正常。边框恢复正常，但现在CSS中的：focus元素不起作用。

用户修复错误后

JS

$("#my_input").css("border", "1px solid black");

如何解决此问题？

Answer 1

使用#my_input，您将覆盖CSS，因为您将该样式直接添加到元素中。相反，请使用#my_input { border: 1px solid black; } #my_input:focus { border-color: green; } #my_input.error { border-color: red; }，然后强制$("#my_input").addClass('error');使用您原来的CSS样式。

作为快速提示，最好是执行以下操作：

<强> CSS

$("#my_input").removeClass('error');

然后在 JS 中，突出显示错误：

import bs4

text = """
<table class="codes"><tr><td><b>Code</b>
</td><td><b>Display</b></td><td><b>Definition</b></td>
</tr><tr><td>active<a name="active"> </a></td>
<td>Active</td><td>This account is active and may be used.</td></tr>
<tr><td>inactive<a name="inactive"> </a></td>
<td>Inactive</td><td>This account is inactive
 and should not be used to track financial information.</td></tr></table>"""

table = bs4.BeautifulSoup(text)
tr_all = table.findAll("tr")[1:]
# critical line:
tds_all = [ td.get_text() for each_tr in tr_all for td in each_tr.findAll("td")]
# and after that unchanged:
table_info= [data.encode('utf-8')  for data in tds_all]

# for control:
print(table_info)

然后删除错误突出显示：

['active ', 'Active', 'This account is active and may be used.', 'inactive ', 'Inactive', 'This account is inactive\n and should not be used to track financial information.']

如何使用CSS保留原始：focus元素？

1 个答案: