CSS användargränssnitt


Innehållsförteckning

    Visa innehållsförteckning


CSS användargränssnitt

I det här kapitlet kommer du att lära dig om följande egenskaper för CSS-användargränssnitt:

  • resize
  • outline-offset

Webbläsarstöd

Siffrorna i tabellen anger den första webbläsarversionen som fullt ut stöder egenskapen.

Property
resize 4.0 79.0 5.0 4.0 15.0
outline-offset 4.0 15.0 5.0 4.0 9.5

Ändra storlek på CSS

Egenskapen resize anger om (och hur) ett element ska kunna ändra storlek på av användaren.

This div element is resizable by the user!

To resize: Click and drag the bottom right corner of this div element.

Följande exempel låter användaren endast ändra storleken på ett <div>-element:

Exempel

div
{
   
resize: horizontal;
   
overflow: auto;
}

Prova själv →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  border: 2px solid;
  padding: 20px; 
  width: 300px;
  resize: horizontal;
  overflow: auto;
}
</style>
</head>
<body>

<h1>The resize Property</h1>

<div>
  <p>Let the user resize only the width of this div element.</p>
  <p>To resize: Click and drag the bottom right corner of this div element.</p>
</div>

</body>
</html>


Följande exempel låter användaren endast ändra storleken på ett <div>-element:

Exempel

div
{
   
resize: vertical;
  overflow: auto;
}

Prova själv →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  border: 2px solid;
  padding: 20px; 
  width: 300px;
  resize: vertical;
  overflow: auto;
}
</style>
</head>
<body>

<h1>The resize Property</h1>

<div>
  <p>Let the user resize only the height of this div element.</p>
  <p>To resize: Click and drag the bottom right corner of this div element.</p>
</div>

</body>
</html>


Följande exempel låter användaren ändra storlek på både höjden och bredden på ett <div>-element:

Exempel

div
{
   
resize: both;
   
overflow: auto;
}

Prova själv →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  border: 2px solid;
  padding: 20px; 
  width: 300px;
  resize: both;
  overflow: auto;
}
</style>
</head>
<body>

<h1>The resize Property</h1>

<div>
  <p>Let the user resize both the height and the width of this div element.</p>
  <p>To resize: Click and drag the bottom right corner of this div element.</p>
</div>

</body>
</html>


I många webbläsare kan <textarea> storleksändras som standard. Här har vi använt resize-egenskapen för att inaktivera storleksändring:

Exempel

textarea {
  resize: none;
}

Prova själv →

<!DOCTYPE html>
<html>
<head>
<style> 
textarea#test {
   resize: none;
}
</style>
</head>
<body>

<h1>The resize Property</h1>

<p>In many browsers, textarea elements are resizable by default. In this example, we have used the resize property to disable the resizability:</p>

&lt;textarea id="test">Textarea - Not resizable&lt;/textarea>
<br><br>

&lt;textarea>Textarea - Resizable (default)&lt;/textarea>

</body>
</html>




CSS-konturförskjutning

Egenskapen outline-offset lägger till utrymme mellan en kontur och kanten eller gränsen på ett element.

This div has an outline 15px outside the border edge.

Obs! Kontur skiljer sig från gränser! Till skillnad från gränsen är konturen ritas utanför elementets gräns och kan överlappa annat innehåll. Konturen är också INTE en del av elementets dimensioner; elementets totala bredd och höjd påverkas inte av konturens bredd.

Följande exempel använder egenskapen outline-offset för att lägga till utrymme mellan gränsen och konturen:

Exempel

 div.ex1 {
  margin: 20px;
  border: 
  1px solid black;
  outline: 4px solid red;
  
  outline-offset: 15px;
} 
div.ex2 {
  margin: 10px;
  border: 1px solid black;
  outline: 5px dashed blue;
  outline-offset: 5px;
} 

Prova själv →

<!DOCTYPE html>
<html>
<head>
<style> 
div.ex1 {
  margin: 20px;
  border: 1px solid black;
  outline: 4px solid red;
  outline-offset: 15px;
} 

div.ex2 {
  margin: 10px;
  border: 1px solid black;
  outline: 5px dashed blue;
  outline-offset: 5px;
} 
</style>
</head>
<body>
<h1>The outline-offset Property</h1>

<div class="ex1">This div has a 4 pixels solid red outline 15 pixels outside the border edge.</div>
<br>

<div class="ex2">This div has a 5 pixels dashed blue outline 5 pixels outside the border edge.</div>

</body>
</html>



Egenskaper för CSS-användargränssnitt

Följande tabell listar alla egenskaper för användargränssnittet:

outline-offset

Lägger till utrymme mellan en kontur och kanten eller kanten på ett element

resize

Anger om ett element kan ändras i storlek eller inte av användaren