Problem with CSS ID Selector

Asked

Viewed 125 times

-1

My problem is this, I have a file css, in it there are 2 types of form, one for contact and another for another type of contact, however the forms They come into conflict, causing one to be disfigured and the other to be normal. I did a quick search on how to fix this, discovered the CSS ID Selectors, but when applying this to my css and my html he was completely bugged.

I already I referenced the ID in the archive html and referenced the tags on css but nothing changes, still buggered. Well, the code css is like this:

 @media(XXXX){
 form > div {XXXX}
 .col-submit {display: block;}

 .col-2 {XXXX}
 .col-3 {XXXX}
 .col-31 {XXXX}
 .col-4 {XXXX}
 .col-5 {XXXX}

 .col-submit button {XXXX}
 }

 form {XXXX}

 form > div > label {XXXX}
 form > div.switch > label {XXXX}

 form > div > .col-4 {XXX}

 label > input {XXXX}

And the html thus:

<div class="map-wrapper">
    <form onsubmit="return false">
        <div class="col-2">
            <label>
                Nome
                <input placeholder="Nome Inteiro" id="name" name="name" tabindex="1">
            </label>
        </div>
        <div class="col-2">
            <label>
                Empresa
                <input placeholder="Nome da Empresa" id="company" name="company" tabindex="2">
            </label>
        </div>
        [..]
        <div class="col-submit">
            <button class="btn btn-submit">Enviar Mensagem</button>
        </div>
    </form>

I just need the form enter the selector, the rest is no problem.

In short, need the css changing that form this way and another form the other way.

For those who haven’t understood, just need that css don’t change the others form of the site.

Obs

Solving this problem, the other form of the site will fix itself.

html css

  • In your example missing the closing tag of <div class="map-wrapper">. It exists in your code?

  • Yes @Sergio, it’s just that I shortened it to not be a tiring thing, I ended up cutting some parts but nothing interesting

  • Ok. Can you create an example here or in jsFiddle with the "bugle" code? In your CSS I don’t see any ID...

  • 1

    Already solved with @Tobymosque’s reply

  • Thanks for the help @Sergio

1 answer

2


assign a id to the form, then go to reference the same by ID in the CSS.

form input {
  border-radius: 5px;
  margin-bottom: 5px;
}

form#vermelho input {
  border: 1px solid red;
}

form#verde input {
  border: 1px solid green;
}

form#azul input {
  border: 1px solid blue;
}
<form id="vermelho">
  <label>
    Vermelho:
    <input type="text" />
  </label>
</form>

<form id="verde">  
  <label>
    Verde:
    <input type="text" />
  </label>
</form>

<form id="azul">
  <label>
    Azul:
    <input type="text" />
  </label>
</form>

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.