Locaweb Style

Documentação

Saiba todas as features que te ajudarão a produzir sistemas mais rapidamente.

Select customizado

Mudamos a aparência da select sem alterar o comportamento padrão do navegador

Para estilizar uma <select>, é bem simples, basta envolvê-la em uma <div>com a classe ls-custom-selecte a mágica acontece.

1
2
3
4
5
6
7
8

<div class="ls-custom-select">
    <select class="ls-select">
        <option value="1"> Opção 1 </option>
        <option value="2"> Opção 2 </option>
        <option value="3"> Opção 3 </option>
        <option value="4"> Opção 4 </option>
    </select>
</div>

Foi usado apenas CSS, com suporte aos navegadores mais atuais, inclusive IE-8 ou superior.

Definindo largura da select através do Grid

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68

 <form action="" class="ls-form row">
  <fieldset>

    <!--  col-md-2  -->
    <label class="ls-label col-md-2">
      <b class="ls-label-text">Status</b>
      <div class="ls-custom-select">
        <select class="ls-custom" name="">
          <option selected="selected">Todos</option>
          <option value="#">Ativos</option>
          <option value="#">Desativados</option>
        </select>
      </div>
    </label>
    <!--  col-md-4  -->
    <label class="ls-label col-md-4">
      <b class="ls-label-text">Status</b>
      <div class="ls-custom-select">
        <select class="ls-custom" name="">
          <option selected="selected">Todos</option>
          <option value="#">Ativos</option>
          <option value="#">Desativados</option>
        </select>
      </div>
    </label>
    <!--  col-md-6  -->
    <label class="ls-label col-md-6">
      <b class="ls-label-text">Status</b>
      <div class="ls-custom-select">
        <select class="ls-custom" name="">
          <option selected="selected">Todos</option>
          <option value="#">Ativos</option>
          <option value="#">Desativados</option>
        </select>
      </div>
    </label>
    <label class="ls-label col-md-8">
      <b class="ls-label-text">Status</b>
      <div class="ls-custom-select">
        <select class="ls-custom" name="">
          <option selected="selected">Todos</option>
          <option value="#">Ativos</option>
          <option value="#">Desativados</option>
        </select>
      </div>
    </label>
    <label class="ls-label col-md-10">
      <b class="ls-label-text">Status</b>
      <div class="ls-custom-select">
        <select class="ls-custom" name="">
          <option selected="selected">Todos</option>
          <option value="#">Ativos</option>
          <option value="#">Desativados</option>
        </select>
      </div>
    </label>
    <label class="ls-label col-md-12">
      <b class="ls-label-text">Status</b>
      <div class="ls-custom-select">
        <select class="ls-custom" name="">
          <option selected="selected">Todos</option>
          <option value="#">Ativos</option>
          <option value="#">Desativados</option>
        </select>
      </div>
    </label>
  </fieldset>
</form>