Teachnique
      CourseRoadmaps
      Login

      IntroductionSyntaxSelectorsInclusionMeasurement UnitsColorsBackgroundsFontsTextImagesLinksTablesBordersBorder BlockBorder InlineMarginsListsPaddingCursorOutlinesDimensionScrollbarsInline BlockDropdownsVisibilityOverflowClearfixFloatArrowsResizeQuotesOrderPositionHyphensHoverDisplayFocusZoomTranslateHeightHyphenate CharacterWidthOpacityZ-IndexBottomNavbarOverlayFormsAlignIconsImage GalleryCommentsLoadersAttr SelectorsCombinatorsRootBox ModelCountersClipWriting ModeUnicode-bidimin-contentAllInsetIsolationOverscrollJustify ItemsJustify SelfTab SizePointer EventsPlace ContentPlace ItemsPlace SelfMax Block SizeMin Block SizeMix Blend ModeMax Inline SizeMin Inline SizeOffsetAccent ColorUser Select

      GridGrid LayoutFlexboxVisibilityPositioningLayersPseudo ClassesPseudo Elements@ RulesText EffectsPaged MediaPrintingLayoutsValidationsImage SpritesImportantData Types

      TutorialRounded CornerBorder ImagesMulti BackgroundColorGradientsBox ShadowBox Decoration BreakCaret ColorText ShadowText2d transform3d transformTransitionAnimationMulti columnsBox SizingTooltipsButtonsPaginationVariablesMedia QueriesFunctionsMath FunctionsMaskingShapesStyle ImagesSpecificityCustom Properties

      IntroductionViewportGrid ViewMedia QueriesImagesVideosFrameworks

      Questions and AnswersQuick GuideReferencesColor ReferencesWeb browser ReferencesWeb safe fontsUnitsAnimation

      PX to EM converterColor Chooser & Animation

      Useful ResourcesDiscussion

      Feedback

      Submit request if you have any questions.

      Course
      User Select

      CSS Tutorial

      This CSS tutorial is designed for beginners to navigate through the essentials and intricate aspects of CSS styling. Upon finishing this tutorial, participants will possess a comprehensive understanding of CSS, setting a solid foundation for further exploration and mastery. This guide aims to equip you with the skills necessary to transform your visions into visually appealing web designs, laying the groundwork for your journey towards becoming an accomplished web designer.

      user-select

      CSS user-select property determines whether text can be selected by the user, with no effect on content loaded as part of a browser's user interface (chrome) other than textboxes.
      While user-select is not inherited, its initial "auto" value often makes it behave as if it is inherited. WebKit/Chromium-based browsers implement the property as inherited, which violates the specification and will cause problems. Chromium has been resolving these problems to align with the specified behavior.

      Possible Values

      • none − The element's and sub-elements' text is not selectable, but these elements may be present in the Selection object.
      • auto − The auto value is determined as follows:
      • The value used for the ::before and ::after pseudo-elements is none.
      • For editable elements, the used value is contain.
      • If the parent of this element has a user-select value all, then the used value is all.
      • If the parent of this element has a user-select value none, then the used value is none.
      • The used value is text.
      • text − The user can select the text.
      • contain − Allows the selection to begin within the element, but contains the selection to the boundaries of that element.
      • all − The content of the element must be selected atomically: If a selection contains part of an element, it must also include all of its descendants. If a double-click or context-click happens in a sub-element, the highest ancestor with this value will be chosen.

      Applies To

      All elements.

      Syntax

      user-select: none | auto | text | contain | all;

      CSS user-select - none Value

      The following example demonstrates the user-select: none property preventing users from selecting the text 
      <html>
      <head>
      <style> 
         .text-none {
            -webkit-user-select: none; 
            user-select: none;
         }
      </style>
      </head>
      <body>
         <p>This text should be selectable.</p>
         <p class="text-none">This text cannot be selected.</p>
      </body>
      </html>

      CSS user-select - auto Value

      The following example demonstrates the user-select: auto property used to select the text 
      <html>
      <head>
      <style> 
         p {
            -webkit-user-select: auto; 
            user-select: auto;
         }
      </style>
      </head>
      <body>
         <p>This text should be selectable.</p>
      </body>
      </html>

      CSS user-select - text Value

      The following example demonstrates the user-select: text property allows the users to select the text 
      <html>
      <head>
      <style> 
         p {
            -webkit-user-select: text; 
            user-select: text;
         }
      </style>
      </head>
      <body>
         <p>This text should be selectable.</p>
      </body>
      </html>

      CSS user-select - all Value

      The following example demonstrates the user-select: all property allows the users to select the text within a single click 
      <html>
      <head>
      <style> 
         p {
            -webkit-user-select: all; 
            user-select: all;
         }
      </style>
      </head>
      <body>
         <p>This text can be selected with a single click.</p>
      </body>
      </html>

      CSS user-select - contain Value

      The following example demonstrates the user-select: contain property allows the users to select the text within the paragraph's boundaries 
      <html>
      <head>
      <style> 
         p {
            -webkit-user-select: contain; 
            user-select: contain;
         }
      </style>
      </head>
      <body>
         <p>This text can be selected within the paragraph's boundaries.</p>
      </body>
      </html>