Customised select styles

e.g.

1
2
3
4
5
6
7
8
9
10
11
12
13
.select-type-1{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding:1em;
border:1px solid #ee7122;
color:white;
text-align: center;
border-radius: 0px;
-webkit-border-radius: 0px;
background: rgba(255, 255, 255, 0.12) url("../img/arrowdown.png") no-repeat 90% 50%;
background-size:10%;
}

self-explained.

css: font-smoothing

1
2
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale

Makes text clearer

css

How to make textarea resizable and change its default outline style

Resize

Switch on / off resize of a textarea on horizontal / vertical / both.

1
<textarea style="resize:horizontal"></textarea>

The resize property can be either:

  • vertical: only resize vertically
  • horizontal: only resize horizontally
  • none: disable resize (also remove the resize area on right bottom.)

Outline

Remove or change style of outline when textarea is focused on safari / chrome etc.

1
<textarea class="customize"></textarea>

1
2
3
.customize:focus{
outline-color:red;
}