Crea un campo de búsqueda con CSS3.

En este artículo vamos a aprender a hacer un campo de búsqueda similar al que tenemos aquí en la barra lateral. El campo de búsqueda es uno de los elementos más importantes para la usabilidad, ya que permite encontrar fácilmente aquello que se anda buscando. En este tutorial veremos como crear un campo de búsqueda a partir de pseudo elementos de CSS3.

El resultado final será este campo  de búsqueda:

Código HTML:

1	<form id="searchform">

2	<input type="text" placeholder="Buscar aqu&iacute;..." required>

3	<button type="submit">Buscar</button>

4

</form>

Código CSS3:

01	#searchform {

02	width: 280px;

03	height:30px;

04	padding: 8px;

05	margin:50px auto;

06	background: #ccc;

07	border-radius: 4px;

08	box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 2px 0 rgba(255,255,255,.5);

09

}

10

11	#searchform input {

12	width: 190px;

13	height:20px;

14	padding: 5px;

15	float: left;

16	border: 0;

17	background: #eee;

18	border-radius: 3px 0 0 3px;

19	box-shadow: 0 1px 1px rgba(0,0,0,.4) inset;

20

}

21

22	#searchform input:focus {

23	outline: 0;

24	height:21px;

25	background: #fff;

26	box-shadow: 0 0 2px rgba(0,0,0,.8) inset;

27

}

28

29	#searchform input:-webkit-input-placeholder {

30	color: #999;

31	font-weight: normal;

32	font-style: italic;

33

}

34

35	#searchform input:-moz-placeholder {

36	color: #999;

37	font-weight: normal;

38	font-style: italic;

39

}

40

41	#searchform input:-ms-input-placeholder {

42	color: #999;

43	font-weight: normal;

44	font-style: italic;

45

}

46

47	#searchform button {

48	position: relative;

49	float: right;

50	border: 0;

51	cursor: pointer;

52	height: 30px;

53	width: 80px;

54	font-size:15px;

55	color: #fff;

56	background: #438cdb;

57	border-radius: 0 3px 3px 0;

58	text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);

59

}

60

61	#searchform button:hover{

62	background: #2672e0;

63

}

64

65	#searchform button:active,

66	#searchform button:focus{

67	background: #2672e0;

68

}

69

70	#searchform button:before { /* flecha */

71	content: '';

72	position: absolute;

73	border-width: 8px 8px 8px 0;

74	border-style: solid solid solid none;

75	border-color: transparent #438cdb transparent;

76

top: 8px;

77	left: -5px;

78

}

79

80	#searchform button:hover:before{

81	border-right-color: #2672e0;

82

}

83

84	#searchform button:focus:before{

85	border-right-color: #2672e0;

86

}

El resultado es un campo de búsqueda muy parecido al de CreativaSfera, con pequeñas modificaciones, como son el tamaño de letra, cursivas, etc. Podéis usar el código sin problemas para vuestros diseños, pero mejor sed un poco creativos y darle un toque personal.

Fuente: enlace