aimtop.xyz

AI, Computing, Design & UX, HTML & CSS, JavaScript and more

Design & UX

20 Simple Ways to Style the HTML details Element — SitePoint

By admin #details, #html elements
20 Simple Ways to Style the HTML details Element — SitePoint

Key Takeaways

  • Enhance the seen enchantment of the `
    ` issue by together with borders, padding, and background colors to inform aside it from totally different content material materials.
  • Customise the default marker of the `
    ` issue using CSS properties for color, spacing, and kind, or change it with personalized characters or images.
  • Profit from CSS pseudo-elements like `::after` to create dynamic, personalized markers which may be animated or styled independently from the `
    ` textual content material.
  • Experiment with hover outcomes, animations, and content material materials transitions all through the `
    ` issue to enhance particular person interaction and visual engagement.
  • Take care of accessibility and usefulness by modifying focus sorts and cursor varieties, guaranteeing that the issue is user-friendly all through fully totally different looking methods.

On this text, we’ll take a look at some simple strategies to vogue the HTML

issue, which is a very useful issue for revealing and hiding bits of content material materials on an web internet web page.

It’s useful to have a simple disclosure consider HTML that doesn’t require JavaScript, nevertheless the default styling of the

issue could possibly be a turn-off for some. Fortunately, it’s pretty easy to differ the styling of this issue.

The desk of contents beneath is an occasion of the

consider use. We’ve added a simple border to it, along with some padding.

Desk of Contents

Introducing the details Ingredient

Proper right here’s the elemental code for the

issue:

particulars>
  summary>Click on on me!summary>
  p>Peekaboo! Right here is a few hidden content material materials!p>
particulars>

Primarily any HTML content material materials is likely to be positioned contained within the

issue. The

issue provides the rapid for the particular person to click on on on the issue to reveal further content material materials, and it must be the first teen of the

issue.

Proper right here’s a keep occasion of this code:

Click on on me!

Peekaboo! Proper right here’s some hidden content material materials!

Let’s take a look at all the strategies we’ll use CSS to spice up the appears to be like of our

issue.

Background Colors, Borders and Padding

A extraordinarily simple resolution to enhance the look of the

issue is in order so as to add some padding along with a border or some background colors.

Together with a border

As confirmed throughout the desk of contents above, a simple border can accomplish that a lot to spice up and description the

issue, along with some padding and a slight border radius:

particulars {
  padding: 10px; 
  border: 5px robust #f7f7f7;
  border-radius: 3px;
}

That’s the simple code we’ve used above to vogue our ToC.

Together with some background color

Let’s add a background color to our

issue as a substitute of a border:

particulars {
  padding: 10px;
  background-color: #e4eaef;
  border-radius: 5px;
}

The result is confirmed throughout the Pen beneath.

The background color gives the issue greater definition, and the padding helps to create some home inside it.

We’re in a position to moreover give a particular background color to the

issue to inform aside it from the rest of the content material materials, and alter its textual content material color:

summary {
  background-color: #2196F3;
  color: white;
  padding: 10px;
}

Discover that altering the textual content material color of the

issue moreover modifications the color of the marker arrow. That’s on account of the marker is certainly hooked as much as the

issue merely as markers (corresponding to bullets) are hooked as much as guidelines objects. We’ll see beneath simple strategies to vogue them individually.

Styling the Marker

The

issue is about to a present of list-item. So the default arrow (▶) that comes with it might be altered similar to the default markers on HTML guidelines objects. We’re in a position to change the character that’s used, and independently change its color.

Altering the marker color

Let’s set the default marker to a particular color. Just for pleasant, let’s moreover bump up the font dimension of the marker. We’re in a position to do this with the ::marker pseudo-element:

summary::marker {
  color: #e162bf;
  font-size: 1.2em;
}

The result is confirmed beneath.

It’s a nice, simple decision, although ::marker sadly isn’t supported in Safari, so see totally different selections beneath if that’s a dealbreaker.

Altering the marker spacing

By default, the marker arrow is pretty close to the summary textual content material. Its list-style-position is about to inside. If we modify it to outdoor, we’ll add home between the summary textual content material and the marker by together with some left padding. We moreover need in order so as to add some left margin so that the triangle doesn’t cling outdoor the container:

summary {
  list-style-position: outdoor;
  margin-left: 30px;
  padding: 10px 10px 10px 20px;
  border-radius: 5px;
}

The result is confirmed beneath.

I’ve exaggerated the spacing between the arrow marker and the summary textual content material merely to make it obvious. Sadly, using list-style-position: outdoor; with the

issue doesn’t work in Safari. Fortunately, there are totally different selections, as we’ll see beneath.

Altering the marker kind

The marker on our

issue doesn’t ought to be a triangle. We’re in a position to change it with any character we please:

summary {
  list-style-type: '⬇ ';
}

Discover that we’ve used '⬇ ' (with an space subsequent to the arrow), which is an alternative to the spacing we tried above.

We now have a down arrow as a substitute of a triangle. Nevertheless … that down arrow gained’t change when the

issue is open. That’s on account of the

issue has two states — closed and open — and we’ve solely set the marker vogue for the closed state. So let’s moreover set a marker for the open state:

particulars[open] > summary {
  list-style-type: '⬆ ';
}

This time, we’ve used an up-pointing arrow. This gives us the result confirmed beneath.

Rattling! As quickly as as soon as extra, Safari lets us down, as a result of it doesn’t assist list-style-type on the

issue each. Don’t despair, though, as we’ll take a look at fancier choices beneath.

We’re in a position to try all varieties of totally different characters, corresponding to + and –, ✓ and Χ or ✗, ⋁ and ⋀ , and even have pleasant with totally different characters like ★ or vibrant fruits like 🍏 🍌 🍓 🍋 and 🍐, nevertheless needless to say these characters won’t work on all strategies, so be considerably cautious, and as quickly as as soon as extra, list-style-type positively gained’t work in Safari.

Making a Custom-made Marker for the summary Ingredient

As we seen above, regardless that we can set a particular character for the default marker, and offers it sorts corresponding to color and font dimension, there is likely to be factors with doing so. A higher alternative could possibly be to remove the marker altogether and create a really personalized varied.

Eradicating the personalized marker

As with guidelines merchandise markers, we’ll take away the marker altogether:

summary  {
  list-style: none;
}



summary::-webkit-details-marker {
  present: none;
}

The same old list-style: none works on all browsers in addition to … (can you guess?) … Safari. A minimal of there’s a proprietary -webkit- alternative on this case.

Discover: one different resolution to remove the marker from the

issue is to offer the

issue a present price of 1 factor apart from list-item — corresponding to block or flex. This works in every browser in addition to … (do I even should say it?) … Safari.

Now our issue has no marker.

Having no marker gives no seen rapid the least bit that this issue is clickable, so it’s not a really perfect idea to go away it at that.

Using a background image as a marker

We might place an image on the background, like so:

summary {
  list-style: none;
  padding: 10px 10px 10px 40px;
  background: url(arrow.svg) no-repeat 14px 50%;
  background-size: 18px;
  font-weight: daring;
}

The result is confirmed beneath.

The draw again of using a background image immediately on the

issue is that we are going to’t rotate it when the

issue is open, on account of animations can’t be set immediately on background images in CSS. (We might, in any case, use a particular image for the open state, nevertheless we nonetheless couldn’t animate it, which is far more pleasant.) So if we’re going to utilize a background image, it’s greater to place it on a element that can be rotated and/or animated.

Using a background image as a marker with ::after

Let’s put the background image inside an ::after pseudo-element:

summary {
  present: flex;
}

summary::after {
  content material materials: '';
  width: 18px;
  high: 10px;
  background: url('arrow.svg');
  background-size: cowl;
  margin-left: .75em;
  transition: 0.2s;
}

particulars[open] > summary::after {
  rework: rotate(180deg);
}

Proper right here’s a keep demo of this code.

We’ve used present: flex on the

issue to make it easy to position the arrow horizontally.

The great issue about this setup is that we are going to add animation to the arrow. (The animation doesn’t seem to work in Safari, nevertheless the habits is sweet adequate, and I’m getting a bit fed up with this browser!)

Making the summary issue seem like a tab

We’ve been setting the

issue to full width, but it surely certainly doesn’t ought to be. We might make it look further like a tab, with this simple change:

summary {
  present: inline-flex;
}

An occasion is confirmed beneath.

Limiting the width of the details issue

In all of our examples to this point, the

issue has stretched to the entire width of its container, on account of it’s a block-level issue. We might give it a particular width, however, if we don’t want it so massive, corresponding to width: 50%;. Or we might might set it to an inline present so that it’s merely as massive as its content material materials:

particulars {
  present: inline-block;
}

Click on on on the tab beneath to reveal the narrower width of the

issue.

Try altering present: inline-block to width: 50% throughout the Pen above.

Placing the marker arrow on the far end of the summary

Let’s do one factor a bit fully totally different now, placing the marker arrow on the right-hand aspect of the

issue. Because of we’ve been using present: flex, transferring the arrow to the far correct is so simple as together with justify-content: space-between to the

issue:

summary {
  present: flex;
  justify-content: space-between;
}

Using ::after as a marker with no background image

There are totally different strategies we might use ::after with out an exact image. Proper right here’s an occasion that makes use of merely ::after with borders:

summary::after {
  content material materials: '';
  width: 0; 
  high: 0; 
  border-top: 10px robust #15171b;
  border-inline: 7px robust clear;
  transition: 0.2s;
}

Proper right here’s a keep demo.

Now we have an arrow that rotates between the closed and open state. We’ve moreover added a nice drop shadow to the

issue.

One different method to utilize ::after with out an image is to place Unicode characters all through the content material materials property:

summary::after {
  content material materials: "25BC";
  transition: 0.2s;
}

This items a triangle kind (▼) as our marker, as confirmed in this CodePen demo.

There are actually hundreds of Unicode symbols, and they also’re pretty pleasant to find. Each comes with a code like U + 25BC or U + 025BC. To utilize that code contained within the content material materials property, take the characters after the + and place them contained within the content material materials quotes, with a on the doorway: content material materials: "25BC". If there’s a lot of zeros at first, you probably can go away them out. (As an illustration, U + 02248 can transform "2248" or "2248".)

So far, the problems we’ve carried out above are higher than adequate, nevertheless there are totally different points we may have pleasant with, so let’s merely play with a few of them proper right here.

Hover affect on the details issue

We’re in a position to set diversified hover outcomes on the

issue. As an illustration, we would do one factor like this:

particulars {
  transition: 0.2s background linear;
}

particulars:hover {
  background: #dad3b1;
}

Whereas we’re at it, let’s moreover transition the

textual content material color throughout the open state:

particulars > summary {
  transition: color 1s;
}

particulars[open] > summary {
  color: #d9103e;
}

The result is confirmed beneath.

We may also merely set a background change on the

issue as a substitute.

Animating the opening and shutting of the details issue

Haha, fooled ya! It appears it’s not potential to animate the opening and shutting of the

issue. In response to MDN:

Sadly, presently, there’s no built-in resolution to animate the transition between open and closed.

Nonetheless, this functionality is coming rapidly (as of late 2024) by the use of calc-size(auto). (Proper right here’s an occasion of the best way it might work.)

Inside the meantime, we may have a bit of little bit of pleasant by animating the contents of the

issue. As an illustration, we might set the contents to fade in as quickly as revealed:

particulars article {
  opacity: 0;
}

particulars[open] article {
  animation: fadeIn .75s linear forwards;
}

@keyframes fadeIn {
 0% {
   opacity: 0;
 }
 100% {
   opacity: 1;
 }
}

The result is confirmed beneath.

One different trick could possibly be to slide throughout the content material materials, like so:

particulars {
  overflow: hidden;
}

particulars[open] article {
  animation: animateUp .5s linear forwards;
}

@keyframes animateUp {
  0% {
    opacity: 0;
    rework: translatey(100%);
  }
  100% {
    opacity: 1;
    rework: translatey(0);
  }
}

The result is confirmed beneath.

It’s a bit cheesy, and possibly overkill, nevertheless worth attempting anyway. Sadly, these animations solely work the first time the issue is clicked (till the browser devtools are open, for some weird trigger!). You primarily need the intervention of JavaScript to make the affect work repeatedly.

Altering summary content material materials in open and closed states

Inside the demos above, the

You Missed

JavaScript

How to Create Interactive Animations Using React Spring — SitePoint

JavaScript

WebAssembly vs JavaScript: A Comparison — SitePoint

JavaScript

How to Make a Simple JavaScript Quiz: Code Tutorial — SitePoint

JavaScript

Build a Full-stack App with Node.js and htmx — SitePoint