Estilo Form

by gsguma

HTML

<html>
<body>
    <input type="text" /><br />
    <textarea></textarea><br />
    <select><option>Teste</option></select><br />
    <input class="checkbox" type="checkbox" /> Teste<br />
    <input class="radio" type="radio" /> Teste<br />
    <button class="btn btn-primary">Botão</button>
    <button class="btn btn-warning">Botão</button>
    <button class="btn btn-danger">Botão</button>
    <button class="btn btn-success">Botão</button>
    <button class="btn btn-info">Botão</button>
    <button class="btn btn-inverse">Botão</button>
    <br /><br/>
    <div class="btn-group">        
        <button class="btn btn-inverse">
            <img src="http://png-2.findicons.com/files//icons/1620/crystal_project/16/agt_action_success.png" /> Salvar
        </button>
        <button class="btn btn-inverse">
            <img src="http://png-5.findicons.com/files//icons/1157/feedicons_2/16/stop.png" /> Excluir
        </button>
        <button class="btn btn-inverse">
            <img src="http://png-5.findicons.com/files//icons/753/gnome_desktop/16/gnome_window_close.png" />
            Cancelar
        </button>
    </div>
    <br />
    <div class="btn-group">        
        <button class="btn btn-primary">Salvar</button>
        <button class="btn btn-primary">Excluir</button>
        <button class="btn btn-primary">Cancelar</button>
    </div>
    <br />
    <div class="btn-group">        
        <button class="btn">Salvar</button>
        <button class="btn">Excluir</button>
        <button class="btn">Cancelar</button>
    </div>    
    <br />
    <table class="table table-bordered table-striped">
        <thead>
            <tr><th>Cabeçalho</th></tr>
        </thead>
        <tfoot>
            <tr><td>Footer</td></tr>
        </tfoot>
        <tbody>
            <tr><td>Corpo</td></tr>
        </tbody>
    </table>
</body>
</html>

CSS

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
}

a:focus {
  outline: thin dotted #333;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

a:hover,
a:active {
  outline: 0;
}

img {
  max-width: 100%;
  vertical-align: middle;
  border: 0;
  -ms-interpolation-mode: bicubic;
}

button,
input,
select,
textarea {
  margin: 0;
  font-size: 100%;
  vertical-align: middle;
}

button,
input {
  *overflow: visible;
  line-height: normal;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  padding: 0;
  border: 0;
}

button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
  cursor: pointer;
  -webkit-appearance: button;
}

input[type="search"] {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
  -webkit-appearance: textfield;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

textarea {
  overflow: auto;
  vertical-align: top;
}

body {
  margin: 10px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  line-height: 18px;
  color: #333333;
  background-color: #ffffff;
}

a {
  color: #0088cc;
  text-decoration: none;
}

a:hover {
  color: #005580;
  text-decoration: underline;
}

p {
  margin: 0 0 9px;
}

p small {
  font-size: 11px;
  color: #999999;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-family: inherit;
  font-weight: bold;
  color: inherit;
  text-rendering: optimizelegibility;
}

h1 small,
h2 small,
h3 small,
h4 small,
h5 small,
h6 small {
  font-weight: normal;
  color: #999999;
}

h1 {
  font-size: 30px;
  line-height: 36px;
}

h1 small {
  font-size: 18px;
}

h2 {
  font-size: 24px;
  line-height: 36px;
}

h2 small {
  font-size: 18px;
}

h3 {
  font-size: 18px;
  line-height: 27px;
}

h3 small {
  font-size: 14px;
}

h4,
h5,
h6 {
  line-height: 18px;
}

h4 {
  font-size: 14px;
}

h4 small {
 ...