Окружение ValidationSummary с полем с помощью CSS
Попробуйте
:s/^.....//
Возможно, вам не нужен «^» (начало строки), и для 5 символов будут ярлыки, но просто - хорошо :)
3 ответа
Вот некоторые CSS, которые будут работать :
.validation-summary-errors {
background-color: #D9FFB2;
border:1px solid #5CBA30;
width: 400px;
}
span.validation-summary-errors {
border-bottom-color: #D9FFB2;
display:block;
}
ul.validation-summary-errors {
margin:0;
padding:0;
border-top:none;
}
Возможно, вам придется поиграть с шириной в зависимости от вашего другого CSS.
Редактировать после комментария
Я изменил ul.validation-summary-errors, чтобы обнулить поля и отступы, и удалил ширину. Теперь он должен работать в разных браузерах.
Если у вас есть оборачивающий div, как во втором примере кода, который вы предоставили. Тогда было бы легко использовать jQuery для «перемещения» класса ошибки из диапазона и ul в этот внешний div.
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var className = "validation-summary-errors";
$("." + className).removeClass(className).closest("div").addClass(className);
});
</script>
<style type="text/css">
.validation-summary-errors { border: solid 1px red; },
</style>
</head>
<body>
<div>
<h2>My Modal Message</h2>
<span class="validation-summary-errors">There were some errors...</span>
<ul class="validation-summary-errors">
<li>First Name too long</li>
<li>Invalid Email Address</li>
</ul>
</div>
</body>
</html>
Этот код будет управлять HTML, чтобы он выглядел так ...
<div class="validation-summary-errors">
<h2>My Modal Message</h2>
<span class="">There were some errors...</span>
<ul class="">
<li>First Name too long</li>
<li>Invalid Email Address</li>
</ul>
</div>
Если я правильно прочитал, а вам нужна только граница на span.validation-summary-errors (а не во внутреннем содержимом), то:
.validation-summary-errors {border: 0 none transparent; /* set defaults for inner */
}
span.validation-summary-errors {background-color:#D9FFB2; /* sets the span */
border: 1px solid #5CBA30;
color:#000000;
margin-top:15px;
margin-bottom:15px;
}
должен сделать это.
Или, немного менее надежно:
.validation-summary-errors {background-color:#D9FFB2;
border: 1px solid #5CBA30;
color:#000000;
margin-top:15px;
margin-bottom:15px;
}
.validation-summary-errors > .validation-summary-errors,
.validation-summary-errors .validation-summary-errors
{border: 0 none transparent; /* should apply styles to */
} /* the children/descendants */
/* with the same name - untested though... */