Có thể ẩn và hiển thị văn bản chỉ bằng CSS (không có mã JavaScript) không? [đóng cửa]

Question 1

Có thể hiển thị và ẩn văn bản bằng liên kết chỉ có CSS - mà không sử dụng JavaScript không?

Ví dụ: Trên trang này

Lưu ý liên kết "Thêm". Khi bạn nhấp vào nó, nó sẽ hiện văn bản. Ví dụ cụ thể này là JavaScript, nhưng tôi không chắc liệu nó có thể được thực hiện với CSS thuần túy hay không.

Question 2

Có một <details>phần tử chưa được tích hợp vào Edge:

<details>
  <summary>more <!-- a bad summary --></summary>
  <p>Some content</p>
</details>

Mở rộng đoạn mã

Tôi không chắc việc tạo kiểu nhất quán trên các trình duyệt khó như thế nào.

Có một cách hack hộp kiểm phổ biến (nơi hộp kiểm có thể bị ẩn và nhãn có thể được tạo kiểu để trông giống bất kỳ thứ gì):

#more:not(:checked) ~ #content {
  display: none;
}

<input id="more" type="checkbox" /> <label for="more">more</label>

<p id="content">Some content</p>

Mở rộng đoạn mã

nhưng không phải lúc nào (có thể là bao giờ? hmm) thích hợp để sử dụng nó; bạn thường có thể quay lại hiển thị nội dung khi JavaScript không tải được và có liên kết liên kết “thêm” đến nội dung đó.

Cũng có :target, nhưng có lẽ nó thậm chí còn ít thích hợp hơn, vì nó khó xây dựng hơn trong cơ chế đóng.

#content {
  display: none;
}

#content:target {
  display: block;
}

#less {
  display: none;
}

#content:target ~ #less {
  display: block;
}

<a href="#content" id="more">More</a>
<p id="content">Lorem ipsum</p>
<a href="#" id="less">Less</a>

Mở rộng đoạn mã

Question 3

Có , điều này có thể thực hiện được với CSS thuần túy. Bạn có thể nhấp vào một phần tử bằng cách sử dụng :checkedthuộc tính của hộp kiểm kết hợp với thuộc tính <label>của phần tử for.

Vì hộp kiểm có thể được bỏ chọn , bạn có thể sử dụng điều này để chuyển đổi chế độ hiển thị bằng cách chỉ cần thêm visibility: hiddenvào một phần tử bắt nguồn từ đó :checked(khi hộp kiểm được nhấp lại, bộ chọn giả này sẽ không hợp lệ và bộ chọn CSS sẽ không còn khớp với mục tiêu).

Điều này có thể được mở rộng thành một <label>với việc sử dụng forthuộc tính, do đó bạn có thể ẩn hoàn toàn chính hộp kiểm và áp dụng <label>trực tiếp kiểu của riêng bạn vào .

Phần sau sử dụng combinator anh chị em liền kề ( +) để chuyển đổi lớp togglekhi <label>phần tử được nhấp:

input[type="checkbox"] {
  display: none; /* Hide the checkbox */
}

/* This is tied to the invisible checkbox */
label {
    background-color: #4CAF50;
    border: 2px solid black;
    border-radius: 20px;
    color: white;
    padding: 15px 32px;
    text-align: center;
    font-size: 16px;
    display: inline-block;
    margin-bottom: 20px;
    cursor: pointer;
    user-select: none;
}

/* The target element to toggle */
input[type="checkbox"]:checked + label + .toggle {
  visibility: hidden;
}

<input type="checkbox" id="checkbox" />
<label for="checkbox">Click me to toggle the content</label>
<div class="toggle">CONTENT</div>

Mở rộng đoạn mã

Question 4

Có, bạn có thể dễ dàng thực hiện việc này chỉ bằng CSS. Vui lòng tham khảo mã bên dưới:

* {
  box-sizing: border-box;
}

body {
  background-color: #646464;
  color: #fff;
}

header {
  background-color: rgba(0, 0, 0, 0.5);
  font-size: 1.5em;
  text-align: center;
  padding: 1em;
}

.panel-wrapper {
  position: relative;
}

.btn {
  color: #fff;
  background: #000;
  border-radius: 1.5em;
  left: 30%;
  padding: 1em;
  text-decoration: none;
  width: 40%;
}

.show,
.hide {
  position: absolute;
  bottom: -1em;
  z-index: 100;
  text-align: center;
}

.hide {
  display: none;
}

.show:target {
  display: none;
}

.show:target~.hide {
  display: block;
}

.show:target~.panel {
  max-height: 2000px;
}

.show:target~.fade {
  margin-top: 0;
}

.panel {
  position: relative;
  margin: 2em auto;
  width: 70%;
  max-height: 100px;
  overflow: hidden;
  transition: max-height .5s ease;
}

.fade {
  background: linear-gradient(to bottom, rgba(100, 100, 100, 0) 0%, #646464 75%);
  height: 100px;
  margin-top: -100px;
  position: relative;
}

<!DOCTYPE html>
<html lang='en' class=''>

<head>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css'>
</head>

<body>
  <header>CSS Only: Show More</header>
  <div class="panel-wrapper">
    <a href="#show" class="show btn" id="show">Show Full Article</a>
    <a href="#hide" class="hide btn" id="hide">Hide Full Article</a>
    <div class="panel">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra consectetur accumsan. Vestibulum vitae ipsum euismod, tempus ligula non, tempus lacus. Phasellus at pellentesque ex. Praesent at ipsum dui. Cras lectus neque, bibendum ac diam
        a, elementum tristique felis. Sed iaculis, diam at vehicula lacinia, odio urna tincidunt felis, sit amet scelerisque urna erat non leo. Pellentesque vel leo vitae tellus bibendum viverra.</p>
      <p>Donec id ultrices mi. Suspendisse potenti. Pellentesque cursus sagittis lacinia. Mauris elit sem, eleifend nec facilisis eget, fermentum sed odio. Nam aliquam massa nec leo tincidunt rhoncus. Integer tincidunt finibus tincidunt. Maecenas aliquam
        fermentum nisi, vitae mattis neque vehicula vitae.</p>
      <p>Nam orci purus, consequat sed lorem id, lacinia efficitur lorem. Vestibulum id quam ut elit congue varius. Donec justo augue, rhoncus non nisl ut, consectetur consequat velit. In hac habitasse platea dictumst. In hac habitasse platea dictumst. Aliquam
        auctor sapien lorem, at vestibulum justo congue vel. Duis volutpat, lorem quis tincidunt ornare, felis tortor posuere tellus, nec pretium neque velit vulputate libero.</p>
      <p>Morbi tortor tortor, auctor porttitor felis in, eleifend cursus ante. Nullam pellentesque lorem ipsum, in fringilla enim suscipit cursus. Pellentesque feugiat volutpat congue. Donec ac ante elit. Quisque ornare lacus dui, id commodo tortor lacinia
        nec. Curabitur dignissim magna sagittis neque aliquam porttitor. Aenean sit amet tincidunt risus.</p>
      <p>Cras feugiat, sapien luctus congue gravida, enim enim tristique nisl, vel porta lacus ante vitae dolor. Duis at nisl sed lectus imperdiet congue. Vestibulum pellentesque finibus ligula, sit amet elementum enim dignissim eget. Nullam bibendum justo
        eros, in placerat est ullamcorper nec. Donec blandit accumsan venenatis. Vivamus nec elit arcu. Morbi ultrices blandit sapien eget aliquam. Pellentesque placerat et libero a sodales. Donec eget erat ac velit maximus ullamcorper. Nulla laoreet
        dolor in purus sollicitudin varius. Duis eu erat ut magna lobortis rhoncus ac at lacus. Nullam in mi sed sem porttitor molestie. Aenean auctor dui in neque vulputate, in mattis purus tristique. Aliquam egestas venenatis ultricies. Nam elementum
        ante libero, nec dictum erat mollis dapibus. Phasellus pharetra euismod nibh, sit amet lobortis odio.</p>
      <p>Sed bibendum dapibus leo eu facilisis. Cras interdum malesuada diam id lobortis. Phasellus tristique odio eget placerat ornare. Phasellus nisl nulla, auctor convallis turpis tempus, molestie blandit urna. Nullam accumsan tellus massa, at tincidunt
        metus imperdiet sed. Donec sed imperdiet quam, id dignissim dolor. Curabitur mollis ultricies tempor. Morbi porttitor, turpis et dignissim aliquam, nunc lacus dignissim massa, a consequat nibh est vel turpis. Pellentesque blandit, ante vehicula
        sollicitudin imperdiet, tellus urna fringilla diam, id tempor neque augue eu nisl. Quisque eu sem posuere, vehicula risus ut, ullamcorper massa. Fusce vulputate bibendum erat, vel dapibus dui consectetur nec. Donec mauris mauris, egestas non malesuada
        non, finibus nec lacus. Duis at mauris tincidunt, accumsan augue non, vestibulum libero.</p>
      <p>Vestibulum fermentum vulputate lectus, at sollicitudin diam laoreet vitae. Aliquam erat volutpat. Nulla condimentum, arcu nec suscipit ultrices, urna tortor rutrum purus, sed mollis lacus ligula vitae justo. Duis vitae malesuada sem, eget finibus
        nibh. Etiam facilisis, urna ac blandit molestie, quam velit congue nibh, ac.</p>

    </div>
    <!-- end panel -->
    <div class="fade"></div>
  </div>
  <!-- end panel-wrapper -->

</body>

</html>

Mở rộng đoạn mã

Question 5

Bạn có thể ẩn một hộp kiểm, nhưng cho phép nó được chọn / bỏ chọn thông qua <label>phần tử liên quan của nó .

Dựa trên việc hộp kiểm có được chọn hay không, bạn có thể ẩn / hiển thị văn bản bổ sung và thậm chí thay đổi văn bản của nhãn từ "Nhiều hơn" thành "Ít hơn".

Tôi đã bao gồm một số chi tiết bổ sung trong CSS để ý định của mỗi định nghĩa có thể rõ ràng hơn một chút.

1. Với một nút chuyển đổi "Thêm" / "Ít hơn":

.more-text, #more-checkbox {          /* Hide the second paragraph and checkbox */
  display: none;
}

input:checked ~ .more-text {          /* Show the second paragraph when checked */
  display: block;
}

.more-label::after {                  /* Label underline, hand cursor, color */
  cursor: pointer;
  text-decoration: underline;
  color: #666;
}

input ~ .more-label::after {          /* Set label text to "More" by default */
  content: 'More';
}

input:checked ~ .more-label::after {  /* Set label text to "Less" when checked */
  content: 'Less';
}

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ullamcorper, arcu ut facilisis interdum, lacus felis fringilla nulla, vel scelerisque massa quam vel leo.
</p>

<input type="checkbox" id="more-checkbox" />
<label class="more-label" for="more-checkbox"></label>

<p class="more-text">
  Sed a ullamcorper ex. In elementum purus ullamcorper justo gravida aliquet. Aliquam erat volutpat. Maecenas in ante quam.
</p>

Mở rộng đoạn mã

2. Với nút "Thêm" ở trên cùng và nút "Ít hơn" ở dưới cùng:

.more-text, #more-checkbox, .less-label {
  display: none;
}

.more-label, .less-label {          
  cursor: pointer;
  text-decoration: underline; 
  color: #666;
}

input:checked ~ .more-text, input:checked ~ .less-label {
  display: block;
}

input:checked ~ .more-label {
  display: none;
}

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ullamcorper, arcu ut facilisis interdum, lacus felis fringilla nulla, vel scelerisque massa quam vel leo.</p>

<input type="checkbox" id="more-checkbox" />
<label class="more-label" for="more-checkbox">More</label>

<p class="more-text">
  Sed a ullamcorper ex. In elementum purus ullamcorper justo gravida aliquet. Aliquam erat volutpat. Maecenas in ante quam.
</p>

<label class="less-label" for="more-checkbox">Less</label>

Mở rộng đoạn mã

Question 6

Về mặt kỹ thuật, có thể chuyển đổi chế độ hiển thị của văn bản dựa trên thời điểm bạn nhấp vào nút hoặc liên kết, như được hiển thị bên dưới:

.hidden-text {
  display: none;
}

.toggle-text:focus + .hidden-text {
  display: block;
}

<p>
  This is an example with no hidden content until you... <a href="#" class="toggle-text">read more</a>!
  <span class="hidden-text">Now I'm visible!!!</span>
</p>

Mở rộng đoạn mã

Nói như vậy, tôi thực sự khuyên bạn nên tự làm quen với JavaScript vì giải pháp sử dụng JavaScript cho những thứ như thế này đơn giản hơn nhiều và cho phép linh hoạt hơn.

Question 7

Có, bạn có thể làm điều đó bằng cách chỉ sử dụng HTML và CSS.

body { padding: 20px; }

div { margin-top: 10px; border: 1px solid black; width: 200px; height: 100px;
    padding: 5px;
}
input:checked + label + div { display: none; }
input + label:after { content: " To Hide"; }
input:checked + label:after { content: " To Show"; }

label {
    background-color: yellow;
    box-shadow: inset 0 2px 3px rgba(255,255,255,0.2), inset 0 -2px 3px rgba(0,0,0,0.2);
    border-radius: 4px;
    font-size: 16px;
    display: inline-block;
    padding: 2px 5px;
    cursor: pointer;
}

<input type='checkbox' style='display: none' id=cb>
<label for=cb>Click Here</label>
<div>
    Hello. This is some stuff.
</div>

Mở rộng đoạn mã

Question 8

bây giờ bạn cũng có thể ẩn / hiện văn bản bằng cách sử dụng CSS! Nếu bạn đang sử dụng kiểu nhập văn bản và muốn hiển thị / ẩn văn bản dựa trên trạng thái của hộp nhập, bạn có thể sử dụng lớp giả CSS mới :placeholder-showncho <input>hoặc <textarea>. Đây là một ví dụ / bản demo của lớp giả được đề cập ở trên !:

/* Some base style  */
.app {
  margin: 10px auto;
  padding: 10px;
}

code {
  background-color: lightgray;
  padding: 4px;
}

input {
  padding: 5px 10px;
}

input:focus {
  outline: none;
}

/* When there is something in input box give 
  it a solid blue border */

input:not(:placeholder-shown) {
  border: solid 2px #42A5F5
}

/* Hide the p initially */
p {
  background-color: #F0F4C3;
  padding: 5px;
  opacity: 0;
  transition: all 300ms ease-in-out;
}


/* Show the p when the placeholder is not shown. 
  i.e. Something is in the input box and placeholder is gone */
input:not(:placeholder-shown)+p {
  opacity: 1
}

<div class="app">
  <h1>Hide/Show Text using input's <code>:placehoder-shown</code> psuedo class!</h1>
  <label for="name">Enter your name</label>
  <input type="text" id="name" placeholder="Your Name">
  <p class="msg">Well done!</p>
</div>

Mở rộng đoạn mã

Đây là Liên kết đến Tài liệu MDN.

Đây là công nghệ thử nghiệm Hãy kiểm tra kỹ bảng tính tương thích của Trình duyệt trước khi sử dụng nó trong sản xuất.

Question 9

Có thể ai đó sẽ thấy giải pháp này trực quan hơn và dễ thực hiện hơn. Cơ chế của việc này là liên kết tự nhắm mục tiêu và trong trường hợp đó, thật dễ dàng để chọn bất kỳ thứ gì tiếp theo trong DOM.

.toggle-hide,
.toggle-content {
  display: none;
}
.toggle-show:target + .toggle-hide,
.toggle-show:target + .toggle-hide + .toggle-content {
  display: block;
}
.toggle-show:target {
  display: none;
}

<a id="target" class="toggle-show" href="#target">Show</a>
<a class="toggle-hide" href="#" >Hide</a>
<p class="toggle-content">Lorem ipsum</p>

Mở rộng đoạn mã

Question 10

Sử dụng "display: none;" attribute.