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.

html css

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;
}

html css