0

Всем привет! У меня есть 'button' а у него есть border-radius = 5px (на самом деле это'checkbox') Это что то на подобии аккордеона у меня есть, написанное полностью на CSS И когда я нажимаю на него то открывается поле с текстом уже с квадратной рамкой, на следующий скринах постараюсь показать: [![введите сюда описание изображения][1]][1]

  [1]: https://i.stack.imgur.com/Jzamy.png

Можно ли как то сделать так что бы при его открытии только нижний 'бордер-радиус' делался квадратным и исчезала тень, и когда закрываю то что бы все обратно появилось, заранее спасибо!

Вот код:

.cust-accord {}

.accord-li {
  position: relative;
}

.accord-li>input[type="checkbox"] {
  position: absolute;
  z-index: -1;
  opacity: 0;
}

input[type="checkbox"]:checked~.accord-toggle {
  max-height: 2500px;
  -webkit-transition: 4s;
  -o-transition: 4s;
  transition: 4s;
}

input[type="checkbox"]:checked~.accord-btn::after {
  transform: rotate(180deg);
}

.accord-toggle {
  max-height: 0;
  overflow: hidden;
  -webkit-transition: .3s;
  -o-transition: .3s;
  transition: .3s;
  margin-left: 20px;
  margin-right: 20px;
}

.accord-btn {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -0-flex;
  display: flex;
  min-height: 50px;
  -ms-align-items: center;
  align-items: center;
  border: 1px solid black;
  padding: 0px 15px;
  margin-bottom: -1px;
  cursor: pointer;
  position: relative;
  background-color: rgb(209, 205, 205);
  border-radius: 3px;
  box-shadow: 0 2px rgba(0, 0, 0, 0.5);
}

.accord-btn::after {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  position: absolute;
  right: 15px;
  top: 50%;
  margin-top: -10px;
  transition: .3s;
  -webkit-background-size: contain;
  background-size: contain;
  background-image: url("arrow.svg");
}

.accord-li {
  margin-bottom: 20px;
}

.accord-toggle-inner {
  padding: 10px 15px;
  border: 1px solid black;
}
<div class="accord-li">
  <input id="accord-2" type="checkbox" name="cust-accord">
  <label class="accord-btn" for="accord-2">Aktualizacja 29.03.2021</label>
  <div class="accord-toggle">
    <div class="accord-toggle-inner">
      <p>Następujące strony zostały dodane do menu "Moje strony":</p>
      <ul>
        <li>Moja pierwsza strona fanowska</li>
        <li>Moja pierwsza interaktywna strona WWW</li>
        <li>No to jesteśmy w DOM-u</li>
        <li>Style dla wybranych</li>
      </ul>
    </div>
  </div>
</div>

1 ответ 1

1

Запись border-radius: 3px; является сокращением от:

border-top-left-radius: 3px;
border-top-right-radius: 3px;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;

Соответственно, вам нужно отдельно указать 0 для bottom.

А тень удаляется через box-shadow: none;
* Также добавил кнопке transition: 0.3s; для плавного изменения.

.cust-accord {}

.accord-li {
  position: relative;
}

.accord-li>input[type="checkbox"] {
  position: absolute;
  z-index: -1;
  opacity: 0;
}

input[type="checkbox"]:checked~.accord-toggle {
  max-height: 2500px;
  -webkit-transition: 4s;
  -o-transition: 4s;
  transition: 4s;
}

input[type="checkbox"]:checked~.accord-btn::after {
  transform: rotate(180deg);
}

/* ▼▼▼ */
input[type="checkbox"]:checked ~ .accord-btn {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  box-shadow: none;
}
/* ▲▲▲ */

.accord-toggle {
  max-height: 0;
  overflow: hidden;
  -webkit-transition: .3s;
  -o-transition: .3s;
  transition: .3s;
  margin-left: 20px;
  margin-right: 20px;
}

.accord-btn {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -0-flex;
  display: flex;
  
  min-height: 50px;
  -ms-align-items: center;
  align-items: center;
  border: 1px solid black;
  padding: 0px 15px;
  margin-bottom: -1px;
  cursor: pointer;
  position: relative;
  background-color: rgb(209, 205, 205);
  border-radius: 3px;
  box-shadow: 0 2px rgba(0, 0, 0, 0.5);
  
  transition: 0.3s;
}

.accord-btn::after {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  position: absolute;
  right: 15px;
  top: 50%;
  margin-top: -10px;
  transition: .3s;
  -webkit-background-size: contain;
  background-size: contain;
  background-image: url("arrow.svg");
}

.accord-li {
  margin-bottom: 20px;
}

.accord-toggle-inner {
  padding: 10px 15px;
  border: 1px solid black;
}
<div class="accord-li">
  <input id="accord-2" type="checkbox" name="cust-accord">
  <label class="accord-btn" for="accord-2">Aktualizacja 29.03.2021</label>
  <div class="accord-toggle">
    <div class="accord-toggle-inner">
      <p>Następujące strony zostały dodane do menu "Moje strony":</p>
      <ul>
        <li>Moja pierwsza strona fanowska</li>
        <li>Moja pierwsza interaktywna strona WWW</li>
        <li>No to jesteśmy w DOM-u</li>
        <li>Style dla wybranych</li>
      </ul>
    </div>
  </div>
</div>

1
  • Спасибо, именно то, что я и хотел!
    – Влад
    29 мар 2021 в 21:40

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.