Form css customization

Css base para form

by Daniel Beff

HTML

<div class="widget-editoria_texto core-form">
	<span style="visibility:hidden; color: red; font-weight: bold;" id="msg_validacao">Alert: Preencher pelo menos 1 destaque</span>
	<table border="1">
		<tbody>
			<tr>
			    <td><label>Título</label></td>
			    <td>
			    	<input type="text" value="" name="titulo" size="100">
			    </td>
			</tr>
			<tr>
				<td><label>Texto</label></td>
				<td>
					<input type="text" value="" name="texto" size="100">
				</td>
			</tr>

			<tr>
				<td><label>Tags</label></td>
				<td>
					<input class="input-tag" type="text" value="" name="tags" size="100">
				</td>
			</tr>
			<tr>
				<td><label>Alinhamento do texto</label></td>
				<td>
					<select id="alinhamento" name="alinhamento">
						<option value="left">Esquerda Esquerda Esquerda Esquerda</option>
						<option value="right">Direita</option>
					</select>
				</td>
			</tr>
		</tbody>
	</table>

	<ul id="lista_destaques">
		<input type="hidden" id="qtd_destaques" value="2" name="qtd_destaques">
		<label>Destaques</label><br>
		
		<li id="destaques-0">
			<span>Titulo</span> <input name="destaques-0-titulo" id="destaques-0-titulo">
			<span>Imagem</span> <input name="destaques-0-imagem" id="destaques-0-imagem">
			<span>Link</span> <input name="destaques-0-link" id="destaques-0-link">
			<span>Chapéu</span> <input name="destaques-0-chapeu" id="destaques-0-chapeu">
			<a class="lookup bt" href="/lookup/materia?widget_class=EditoriaTextoWidget">Procurar</a>
			<a class="bt red" onclick="removerDestaque('destaques-0')" href="#">Remover</a><br>
		</li>
		<li id="destaques-1">
			<span>Titulo</span> <input name="destaques-1-titulo" id="destaques-1-titulo">
			<span>Imagem</span> <input name="destaques-1-imagem" id="destaques-1-imagem">
			<span>Link</span> <input name="destaques-1-link" id="destaques-1-link">
			<span>Chapéu</span> <input name="destaques-1-chapeu" id="destaques-1-chapeu">
			<a class="lookup bt"...

CSS

/*
		azul padrão
		#0f68d4
		#2e7fe8 globocore
	*/




	.core-form{
		-webkit-font-smoothing: antialiased;
		font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
   		/*font-weight: 300;*/
		color:#333;
		font-size: 13px;
	}

	/*reset core form*/



	/*animacao e css3*/
	.core-form input,
	.core-form textarea,
	.core-form select,
	.core-form	.bt
	{
		transition: all 0.3s;
		-moz-transition: all 0.3s; 
		-webkit-transition: all 0.3s; 
		-o-transition: all 0.3s; 
		-moz-border-radius: 4px;
		-webkit-border-radius: 4px;
		-o-border-radius: 4px;
		-ms-border-radius: 4px;
		-khtml-border-radius: 4px;
		border-radius: 4px;
	}

	.core-form select{
		outline:none;
		 background: #fff;
		 width: 268px;
		 padding: 0 30px 0 5px;
		 font-size: 13px;
		 /*line-height: 1;*/
		 border: 1px solid #ccc;
		 height: 34px;
		 -webkit-appearance: none;
		 background:url("http://s13.postimg.org/sivvq50cz/select_arrow.png?noCache=1376597211") no-repeat  center right;
		 cursor:pointer;
	}
	.core-form select:focus{
		border: 1px solid #2e7fe8;
	}

	.core-form ul{
		list-style: none;
		padding:0px;
		margin-top: 10px; 
	}
	.core-form li{
		background-color:#f5f5f5;
		margin-bottom:3px;
		padding:10px;
		width: auto;
		display: block;
	}
	.core-form table{
		padding:0px;
		border:none;
	}
	.core-form td, .core-form tr{
		border:none;
		padding:10px 0px;
	}
	.core-form label{
	 color:#2e7fe8;
	 font-weight: bold;font-size: 16px;
	}
	.core-form input {
		border:1px solid #ccc;
		outline:none;
		padding:10px;
		font-size: 12px;
	}
	.core-form input.input-tag{
		font-weight: bold;
		color: #2e7fe8;
	} 
	

	.core-form input:focus {
		border:1px solid #2e7fe8;
	}

	.core-form	.bt{
		padding:10px 15px;
		background-color:#2e7fe8;
		color:#fff;
		text-decoration: none;
		cursor:pointer;
		font-size: 13px;
		font-weight:...