asp.net-mvc-3 - 显示必填字段错误消息后下拉列表箭头不起作用

Question

我正在显示一些 ID 列表，如下所示

<li>
<label> Nest</label>
<select id="NestId" class="Select input-validation-error" name="NestId" data-val-required="Please select nest name." data-val-number="The field Nest ipId must be a number." data-val="true">
<span data-valmsg-for="NestId"></span>
<div class="formError NestshipId" style="top: -69px; left: 202px; opacity: 0.8;">
</li>

ddl 的箭头在显示 requirefield erorr msg 之前工作正常。一旦显示，它的某些部分就在 ddl 箭头上。因此无法通过错误消息单击箭头

当我通过萤火虫检查代码时，我可以看到这样的元素

<li>
<label> Relation</label>
<select id="NestId" class="Select input-validation-error"     name="NestId" data-val-required="Please select relation." data-val-  number="The field NestId must be a number." data-val="true">
<span data-valmsg-for="NestId"></span>
<div class="formError NestId" style="top: -69px; left: 202px; opacity: 0.8;">

.input-validation-error
{
border: 1px solid #ff0000;
background-color: #ffeeee;
}

<div class="formError NestId" style="top: -69px; left: 202px; opacity: 0.8;">
<div class="formErrorContent">Please select relation.</div>
</div>

我认为箭头是不可点击的，因为它上面存在字段消息。任何人都可以帮我找到解决方案。该消息应该是可见的，并且 ddl 箭头应该可以工作

Answer 1

您也可以尝试将错误消息的位置设置在左侧，在这种情况下，它不会与下拉箭头重叠。

.input-validation-error
{
border: 1px solid #ff0000;
background-color: #ffeeee;
position:relative;
left:20px;
}