Select content in a div with only css

.selectable {
    -webkit-touch-callout: all; /* iOS Safari */
    -webkit-user-select: all; /* Safari */
    -khtml-user-select: all; /* Konqueror HTML */
    -moz-user-select: all; /* Firefox */
    -ms-user-select: all; /* Internet Explorer/Edge */
    user-select: all; /* Chrome and Opera */
    border-bottom-width: 1px;
    border-bottom-style: dashed;
    border-bottom-color: chocolate;
    cursor: pointer;
    display: inline-block;
}

Just by adding that CSS and adding the class selectable to your HTML element will highlight all the inner HTML. Then the user can press ctrl+c to copy the text without needing to highlight everything. This has a very nice effect on your mobile devices. It will highlight everything on your phone which is very convenient

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top