CSS3 User Interface

Next ❯Media Query

It defines the features related to the user interface

  • turned_in_notUser Interface related properties
    • user-select
    • resize
    • box-sizing
    • pointer-events
    • scroll-behavior
    • caret-color
    • touch-action
    • cursor

user-select

It specifies whether the text of an element can be selected

ValuesDescription
autoDefault. Text can be selected if browser allows it
noneThe text can't be selected by the user
textThe text can be selected by the user
allText selection is made with one click


You can't select this text
div {
  -webkit-user-select: none; /*Chrome, Opera, Safari*/
  -moz-user-select: none; /*Firefox*/
  user-select: none; /*Standard syntax*/
}
user-selectsubject
user-selectclose
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
div {
  -webkit-user-select: none; /*Chrome, Opera, Safari*/
  -moz-user-select: none; /*Firefox*/
  user-select: none; /*Standard syntax*/
}
</style>
</head>
<body>
  <div style="text-align: center;">
    <h1>You can't select this text</h1>
  </div>
</body>
</html>

resize

It specifies whether an element is resizable or not by the user

Resize me !

You can now adjust both the height & width of the element

resize:
div {
  resize:both;
  overflow:auto;
  background-color: #f1f1f1;
}
resizesubject
resizeclose
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
div {
  resize:both;
  overflow:auto;
  text-align:center;
  background-color: #f1f1f1;
}
</style>
</head>
<body>
  <div>
    <h1>Resize me !</h1>
  </div>
</body>
</html>

box-sizing

It allows us to include the padding and border in an element's total width and height

Box !

Default value. Here, width and height properties includes only the content

box-sizing:
div {
  width: 230px;
  height: 100px;
  border: 20px solid #00ffac;
  box-sizing: content-box;
}
box-sizingsubject
box-sizingclose
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
div {
  width: 230px;
  height: 100px;
  border: 20px solid #00ffac;
  box-sizing: content-box;
  margin:auto;
  text-align:center;
}
</style>
</head>
<body>
  <div>
    <h1>Box !</h1>
  </div>
</body>
</html>

pointer-events

It specifies whether an element can become the target of mouse events (if any) or not

Mouse over on me !

Default value. (if any) Mouse event is their it will triggered by mouse

pointer-events:
h1 {
  pointer-events: auto;
  text-align:center;
}
pointer-eventssubject
pointer-eventsclose
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
h1 {
  pointer-events: auto;
  text-align:center;
}
</style>
</head>
<body>
  <h1 onmouseover="this.style.color='red'" onmouseout="this.style.color='black'">
    Mouse over on me !
  </h1>
</body>
</html>

scroll-behavior

It specifies the behavior for a scrolling

Below example, change the values & click/try scroll links (S1, S2)


S1
S2

(Default) The scrolling box scrolls instantly

scroll-behavior:
div {
  border: 1px solid black;
  scroll-behavior: auto;
  text-align:center;
  height:120px;
  overflow:auto
}
scroll-behaviorsubject
scroll-behaviorclose
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
div {
  border: 1px solid black;
  scroll-behavior: auto;
  text-align:center;
  height:120px;
  overflow:auto;
}
h1{
  height:120px;
}
</style>
</head>
<body>
  <div>
      <h1 id="s1">S1</h1>
    <h1 id="s2">S2</h1>
  </div>
  Scroll to : 
  <a href="#s1"> S1</a>
  <a href="#s2">S2</a>
</body>
</html>

caret-color

It specifies the color of the visible input cursor


Try to input some value & see the input cursor color

caret-color:
input {
  caret-color: red;
  text-align:center;
}
caret-colorsubject
caret-colorclose
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
input {
  caret-color: red;
  text-align:center;
}
</style>
</head>
<body>
  <input type="text" placeholder="try to input">
</body>
</html>

touch-action

Used to restrict touch related controls

Example
touch-action: pan-x; /*To enable single-finger x-axis panning gestures*/
ValuesDescription
auto (default) To enable browser handling of all panning and zooming gestures
none To disable all touch related gestures
pan-x To enable single-finger horizontal (x-axis) panning gestures
pan-yTo enable single-finger vertical (y-axis) panning gestures
manipulationTo enable panning and pinch-zoom gestures, but disable gestures such as double-tap to zoom
pinch-zoomTo enable multi-finger panning and zooming of the page, also can be used along with any of the pan- values

cursor

It specifies the type of cursor to be displayed when pointing on an element

#help {
  cursor:help;
}
  • Point on the below boxes and checkout your cursor Symbol
cursor:{cursor}
cursor:{cursor}
cursor:{cursor}
cursor:{cursor}
cursor:{cursor}
cursor:{cursor}
cursor:{cursor}
cursor:{cursor}
cursor:{cursor}
cursor:{cursor}
cursor:{cursor}
cursor:{cursor}
cursor:{cursor}
cursor:{cursor}
cursor:{cursor}
cursor:{cursor}
cursor:{cursor}
cursor:{cursor}
cursor:{cursor}
cursor:{cursor}
cursor:{cursor}
cursor:{cursor}
cursor:{cursor}
cursor:{cursor}
cursor:{cursor}
cursor:{cursor}
cursor:{cursor}
cursor:{cursor}
cursor:{cursor}
cursor:{cursor}
cursor:{cursor}
cursor:{cursor}
cursor:{cursor}
cursor:{cursor}
cursor:{cursor}
cursor:{cursor}
cursor:url('customCursorImage.png'),auto;

  • Media Query
❮ Prev CSS3 Flexbox
Next ❯Media Query
TryOut Examples"Learn to Explore..!"

TryOut Editor

receipt
❯