How do I change the edge color of the input tag when selected

Asked

Viewed 260 times

1

How do I change the checkbox border color when, for example option 1 is selected?

Given my html code:

<div class="opcao-de-entrega">

   <p class="menu-opcoes-titulo">
             Opções de entrega
    </p>
    <div class="row">
                      <div class="col-md-4">
                          <label><input type="checkbox" value="1">Sedex 1</label>
                      </div>
                      <div class="col-md-4">
                          <label><input type="checkbox" value="2">Economica 2</label>
                      </div>
                      <div class="col-md-4">
                          <label><input type="checkbox" value="3">Retirar na Guiatel 3</label>
                      </div>

                    </div>

In the script I want to type only if I select the first input this is selected and the border appears, I am well Noob, type tried as on this screen has 3 input, do the if(input["0"].checked) ai this turned red/blue etc, but I want that type I marked the input 1, for example, then I clear, the edge sum too. help?

 $('.checkbox label')



$('input[type="checkbox"]').change(function() {

  //var input = document.getElementsByTagName('input');

    if(this.checked) {
        //Do stuff
        //this.style('border', '1px solid red');
        console.log("aqui");
        $('input[type="checkbox"]').parent().css('border', '1px solid red');

    }
});
javascript jquery

  • Tatah you can do this perfectly only with CSS, do not need JA or jQuery, if you are interested I reply with an example for you

  • @hugocsl how? why type are 3 input you would use :active ?

  • No, if it is required input it is better pq vc can use Valid and invalid, if it is a standard input you use Focus.

3 answers

0

  if ($("#IdDoCheck").is(':checked')) {
            $("#IdDoCheck").css({ "border-color": "#F00", "padding": "1px" });


        } else {
            $("#IdDoCheck").css({ "border-color": "blue", "padding": "1px" });

        }

0


A simple alternative is to use the method toggleClass at the events phocus and Blur.

$('input.colorir').bind('focus blur',function(){
  $(this).toggleClass('input_colorido');
});
input{
  outline: none;
}

.input_colorido{
  background-color: #FFFF99;
  border: 2px solid #FF0000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="colorir" type="text" value="AbCde" />

0

You can do this only with CSS, when the input is selected you change the color, the CSS property for that would be :Focus, so the code to perform such an action would look like this: 

input[type=checkbox]:focus {
  border-color: red; 
}

To learn more about pseudo-classes in CSS, just access these links: https://www.w3schools.com/css/css_pseudo_classes.asp (EN) https://www.tutorialspoint.com/css/css_pseudo_classes.htm (EN) https://medium.com/@88181514gabriel/selectors-css-pseudo-classes-c9d2125480d8 (EN)

Browser other questions tagged javascript jquery

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