Question

我正在使用一个网站，允许会员使用CSS更改其自身页面的外观。不允许HTML，仅允许CSS。我故意使我的页面明亮而冲突，并且“图形设计是我的激情”。这不是一个严肃的网站，我也没有认真对待。

但是，我想实现一个按钮，该按钮可以删除设计中视觉上最令人反感的元素，并可以在任何人愿意的情况下实际阅读我的页面。

我非常有信心，仅CSS不可能做到这一点，但我想我只是想确定一下。

Answer 1

这是我对OP的问题的评论的扩展：

.content{
  width: 500px;
  background: #e1e1e1;
  margin-top: 30px;
}
.remove-el{
  width: 30px;
  height: 30px;
  background: red;
}
input[type="checkbox"]{
  -webkit-appearance: none;
}
input[type="checkbox"] ~ label{
  background: teal;
  color: #fff;
  padding: 5px;
}
input[type="checkbox"]:checked ~ label{
  background: #e1e1e1;
  color: #aaa;
}
input[type="checkbox"]:checked ~ .content .remove-el{
  display: none;
}

<input type="checkbox" id="more-readable">
<label for="more-readable">Make it more readable</label>

<div class="content">
  <div class="remove-el"></div>
  <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sunt nostrum quasi labore, neque incidunt enim soluta velit in possimus, amet cupiditate optio sequi ipsum natus aperiam quibusdam eos molestiae. Excepturi.</p>
  <p>Rerum consequuntur provident, vel tempora dolore deleniti impedit quia ab exercitationem laboriosam quaerat perspiciatis doloremque accusamus, nesciunt sed veniam libero soluta quasi recusandae unde nostrum sapiente nam. Culpa, fugiat omnis!</p>
    <div class="remove-el"></div>
  <p>Quibusdam, voluptatibus ipsa reprehenderit reiciendis suscipit maxime vero praesentium nobis ex perspiciatis quo laudantium? Alias aliquam voluptatum, exercitationem ea modi corrupti aspernatur a. Illo sint distinctio quos quod quas quasi!</p>
  <p>Autem praesentium inventore soluta atque ut, consectetur minima itaque perspiciatis sint nobis assumenda eum vitae culpa nemo fugiat facere in sapiente eaque a voluptatibus aut recusandae commodi ipsam? Iste, quae.</p>
    <div class="remove-el"></div>
  <p>Unde sequi nihil, molestias laudantium ex dolorem corporis dolore at minima perferendis consequuntur, nisi repellendus quibusdam sit reiciendis fugit officiis optio dicta veniam asperiores ab enim. Dolorem commodi illum saepe!</p>
  <p>Eos labore quo, deserunt nobis hic molestias excepturi accusantium quidem aperiam quisquam sapiente delectus. Nulla enim delectus illum, sunt cupiditate et incidunt ducimus alias eligendi labore iste! Iste, sapiente ad.</p>
    <div class="remove-el"></div>
  <p>Sint, nisi sunt. Neque, libero est rerum adipisci cum commodi aliquid architecto eveniet natus culpa eligendi earum ratione? Excepturi sed hic impedit esse inventore fugit? Ut minus quia odio quis!</p>
  <p>Corrupti nesciunt dolor amet sunt autem dicta minima expedita ducimus illum! Mollitia molestiae nihil veniam cupiditate! Veritatis explicabo voluptatem soluta, nemo libero illum. A magni molestiae provident possimus laudantium dolorum.</p>
    <div class="remove-el"></div>
    <div class="remove-el"></div>
  <p>Itaque numquam, provident molestias odit eum deleniti ab temporibus iure earum non pariatur a aliquid minus? Eius adipisci quis delectus praesentium ab minus quaerat debitis inventore quo! Hic, facilis vel.</p>
    <div class="remove-el"></div>
  <p>Atque esse pariatur porro non quo minus nesciunt cumque perspiciatis vel ad deserunt culpa eius facere aut adipisci, fuga, mollitia nam enim dolore veritatis vitae, dolorem obcaecati? Eos, quidem in.</p>
</div>

是否可以仅使用CSS来更改页面外观来创建按钮？

1 个答案: