Я пытаюсь, чтобы вход отображался при нажатии кнопки, но затем мне нужен фон вокруг кнопки и входа.В настоящее время моя разметка выглядит следующим образом:
Так что, когда причина щелчка, я в основном хочу желтый фон (предупреждение-предупреждение) вокруг причиныКнопка и вход.Моя разметка выглядит так:
div.saveReason {
display: inline;
background-color: #fff3cd;
border: solid 1px #ffeeba;
border-bottom-width: 0;
padding-bottom: 20px;
z-index: 1;
}
div.saveReasonDetail {
z-index: 0;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div>
<a class="btn btn-primary mr-2 SaveEdits">Save</a>
<div class="saveReason"><a href="#" class="btn btn-secondary mr-2 SaveReason">Reason</a></div>
<a class="btn btn-link CancelEdits">Cancel</a>
<div class="alert alert-warning mt-2 saveReasonDetail">
<div class="form-group viReason">
<div class="validator-container">
<textarea name="iReason" rows="4" id="iReason" class="form-control iReason"></textarea>
</div>
</div>
</div>
</div>
Мои проблемы:
1) Я не хочу, чтобы граница под кнопкой ... Я хочу, чтобы она была тольконет «снаружи» от желтого.
2) Я хочу, чтобы желтый фон немного выходил за пределы кнопки причины (не затрагивая поля между уже установленными кнопками).
Возможно ли это?
Обновление : я получил действительные ответы от Карима Даббита и Чейза Ингебрицона.Карим был сначала помечен как ответ, но я не являюсь экспертом в HTML, я думаю, что комментарий, который Чейз сделал по поводу «того же контейнера», кажется важным.Обязательно просмотрите и его ответ.