Como modificar 2 inputs diferentes no style.css?
Estou começando agora com CSS, talvez essa pergunta seja ridícula mas veio essa dúvida em mente, não sei se já foi feita essa pergunta no tópico, se foi, desculpe mas não encontrei nenhuma igual. Eu fiz um iframe para um cadastro e outro para login, então eu modifiquei o input, mas no fim modificou tanto o do cadastro e do login. Quero que o width e height do login e cadastro sejam diferentes, eu tentei modificar mas não certo.
Alguém tem alguma sugestão?
Não sei se vocês pedem o código, mas não consegui fazer um, acabei desistindo.
Alguém tem alguma sugestão?
Não sei se vocês pedem o código, mas não consegui fazer um, acabei desistindo.
Matheus
Curtidas 1
Melhor post
Carlos Duarte
10/07/2019
Estou começando agora com CSS, talvez essa pergunta seja ridícula mas veio essa dúvida em mente, não sei se já foi feita essa pergunta no tópico, se foi, desculpe mas não encontrei nenhuma igual. Eu fiz um iframe para um cadastro e outro para login, então eu modifiquei o input, mas no fim modificou tanto o do cadastro e do login. Quero que o width e height do login e cadastro sejam diferentes, eu tentei modificar mas não certo.
Alguém tem alguma sugestão?
Não sei se vocês pedem o código, mas não consegui fazer um, acabei desistindo.
Alguém tem alguma sugestão?
Não sei se vocês pedem o código, mas não consegui fazer um, acabei desistindo.
Bom dia Matheus,
Me chamo Carlos também estou aprendendo front-end, mas acho que nessa posso te ajudar.
Vamos lá, pelo que entendi você está aplicando o css nos dois inputs, isso pode está acontecendo, porque o seletor que você
está usando no css seja o de input:
Ex:
input{
propriedades : valores;
}
Dessa forma todos os inputs da sua página receberam essa regra css.
nesse casso o melhor seria você criar duas classe uma chamada inputCadastro e outra inputLogin,
Como não sei qual seu nível de conhecimento, então vou tentar detalhar aqui o melhor possível:
No HTML :
Nos inputs do cadastro você coloca nas tags o atributo class e como valor passa o nome da classe:
<input class="inputCadastro"> (faça em todos )
Nos inputs do Login você faz o mesmo, mas coloca como valor inputLogin:
<input class="inputLogin">
No CSS:
Aqui você vai criar as duas regras css uma da classe inputCadastro e outra da inputLogin:
.inputCadastro{
suas definições para esse tipo input
}
.inputLogin{
suas definições para esse tipo input
}
Nota: o ponto (.) antes do nome da classe é importante, é ele que diz ao navegador que é pra procurar os elemento no html que possuem a classe
que você.
Tenta ai e me dá a resposta se deu certo ou não.
espero ter ajudado e que o texto não tenha ficado muito redundante é que como não sei seu nível tentei explicar da maneira mais clara possível.
Dá uma estudada em seletores css eles vão te dar uma ajuda nessas situações.
GOSTEI 1
Mais Respostas
Julio
09/07/2019
Utilize Classes quando quiser que seus components tenham o mesmo estilo. Exemplo:
CSS:
.inputs-width-100percent{
width: 100%;
}
HTML:
<input class="inputs-width-100percent" type="text" name="meuInput" placeholder="Esse é meu input com 100% de largura">
Se você quiser que apenas um elemento tenha um comportamento específico, você pode utilizar um ID, por exemplo. Exemplo:
#input-unico {
height: 50px
}
HTML:
<input id="input-unico" type="text" name="meuInputUnico" placeholder="Esse é meu input com ID">
Obs: Normalmente não costumamos usar ID para manipular css. Nós utilizamos ID com maior frequência, quando queremos manipular algum dado com Javascript.
Mas no seu caso, você pode utilizar sem problemas.
CSS:
.inputs-width-100percent{
width: 100%;
}
HTML:
<input class="inputs-width-100percent" type="text" name="meuInput" placeholder="Esse é meu input com 100% de largura">
Se você quiser que apenas um elemento tenha um comportamento específico, você pode utilizar um ID, por exemplo. Exemplo:
#input-unico {
height: 50px
}
HTML:
<input id="input-unico" type="text" name="meuInputUnico" placeholder="Esse é meu input com ID">
Obs: Normalmente não costumamos usar ID para manipular css. Nós utilizamos ID com maior frequência, quando queremos manipular algum dado com Javascript.
Mas no seu caso, você pode utilizar sem problemas.
GOSTEI 0