Ir para conteúdo
marcelocardoso

+ de um input, textarea, select, personalizados, customizados

Recommended Posts

Pessoal...

Procurei na NET, encontrei para LINK, criar dois tipos de links, mas para INPUT's não encontrei.
Como posso montar varios tipos estilizados de INPUTS, TEXTAREAS, SELECT???
Contribuições, agradeço.

 

input[type=text],
input[type=email] {
    background: white;
    border: 1px solid orangered;
    color: white;
    height: 40px;
    border-radius: 5px;
}

Tentei usar INPUT.modificado[type=text],
depois no CLASS do bootstrap HTML, colocar a classe MODIFICADO, mas não ROLA...
Sugestões?????????

Compartilhar este post


Link para o post
Compartilhar em outros sites

também tentei assim, olhando algumas coisas na internet, mas nada...
 

.input-modelo1[type=text],
.input-modelo1[type=email] {
    background: white;
    border: 1px solid orangered;
    /*
    -webkit-box-shadow: 0px 0px 6px 1px rgba(209,207,209,0.75);
    -moz-box-shadow: 0px 0px 6px 1px rgba(209,207,209,0.75);
    box-shadow: 0px 0px 6px 1px rgba(209,207,209,0.75);
    */
    color: white;
    height: 40px;
    border-radius: 5px;
}

.input-modelo1[type=text]:focus,
.input-modelo1[type=email]:focus {
    background-color: rgba(49, 49, 49, 0.20);
    color: rgba(49, 49, 49, 0.35);
}

.input-modelo1::-webkit-input-placeholder {
    color: rgba(49, 49, 49, 0.35) !important;
}

.input-modelo1:-moz-placeholder {
    color: rgba(49, 49, 49, 0.35) !important;
}

.input-modelo1::-moz-placeholder {
    color: rgba(49, 49, 49, 0.35) !important;
}

.input-modelo1:-ms-input-placeholder {
    color: rgba(49, 49, 49, 0.35) !important;
}

tento inserir na CLASS o class="form-control input-modelo1" mas nem assim estiliza o INPUT.
tem alguma maneira de realizar isso...

Compartilhar este post


Link para o post
Compartilhar em outros sites

Tenta assim, mas seu arquivo CSS deve ser requisitado no html depois do arquivo do bootstrap:

Citar

.form-control.input-modelo1 {

    /* Propriedades Aqui*/

}

 

Sei quase ou nada de bootstrap, mas posso lhe dizer que apesar de muito bom, ele como vários outros frameworks são por dizer  "chupa-cabra" e não lhe permite personalização própria a não ser que edite o próprio framewrok.

Só uma coisa deve pensar antes de usar: Se realmente precisa de algo tudo mastigado, se sim devo limitar ao utilizar somente isso?

 

Como sugestão procure o arquivo CSS do bootstrap elementos e propriedades relacionadas a input, e veja se algo pode entrar em conflito com as suas, se sim, então você tem 2 opções editar ou remover.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por Luiz Fernando 111
      Caros amigos, estou tentando adicionar soma entre inputs do html e do javascript, mas com esse exemplo, apenas consegui colocar no input do html. Como faço para implementar no input do javascript e somar o valor junto com o Valor Total mostrar lucro quando foi debito e prejuizo quando for crédito ? Alguém poderia me dá help !!!
       
       

    • Por Remilton Silva
      <script> $(document).ready(function() { $("button").click(function(){ if ($(this).val() == '' ) { $("button").disabled=true; }else { $("button").disabled=false; } }); }); </script> Olá prezados,
       
      Estou pesquisando mas ainda não achei algo que me ajude com o cod.
      se alguém puder ajudar, será de grande valia.
       
      preciso que o button só seja ativado quando todos os inputs forem preenchidos, como faço isso em JavaScript?
       
      <!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="corpo-form"> <h2>Cadastrar</h2> <input type="text" class="form-control" name="nome" placeholder="Nome Completo" maxlength="30"><br><br> <select class="form-control" name="gerencia"> <option value="Selecione uma Opção" selected>Selecione uma Opção.</option> <option value="GECOR">Vendas</option> <option value="GECON">Almoxarifado</option> <option value="GECIN">RH</option> <option value="DIRETORIA">DIRETORIA</option> </select><br><br> <input type="text" class="form-control" name="telefone" placeholder="Telefone"maxlength="30"><br><br> <input type="email" class="form-control" name="email" placeholder="E-mail" maxlength="40"><br><br> <input type="password" class="form-control" name="senha" placeholder="Senha" maxlength="15"><br><br> <input type="password" class="form-control" name="confsenha" placeholder="Confirmar Senha" maxlength="15"><br><br> <input type="button" class="btn btn-danger btn-outline-light btn-block" value="Entrar" maxlength="" required="required"> <br> </div> </body> </html>  
    • Por Robson Augusto
      Galera se alguém souber o que ocorre,  é o seguinte, não acredito que possa ser Problema de SEO, mas vamos lá meu site anuncicarbh.com, não aparece em pesquisa feitas pelo computador, com a palavra chave "seminovos bh", ele aparece na primeira oscilando para segunda pagina do bing e yahoo, fazendo a pesquisa pelo telefone, ja no pc ele nao aparace mais no yahoo, mas continua a aparecer no bing, ja no google ele teve pequenas aparições na terceira página, agora em ambas as pesquisas de pc e celular ja não aparece mais no google... So aparece atualmente no google, pesquisando pelo nome do site... Alguem saberia me dizer o por que disso? será SEO?
    • Por Yanzoca
      Olá, bom dia/tarde/noite, gostaria de uma ajuda sobre como mudar a interface do photoshop, no meu photoshop a janela de cores aparece como na segunda foto, mas gostaria de deixa-la como na primeira foto, poderiam me ajudar? Desde ja agradeço


    • Por 4ly
      Olá. Bom basicamente eu tenho um botão âncora que leva até a aba de sobre do meu site, só que ele não tem animação, ele simplesmente "teleporta" para essa aba do nada isso não é legal. 
      Gostaria de saber algum código de JavaScript ou CSS para solucionar isso 
      Esse é o código : 
       
      <button id="explorer"><a href="#about">Explorar</a></button>
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.