0

I got this problem changing a color from a specific code. My problem is in jQuery, can someone help me out?

I would like to know if there's something I can do to change color from selector. Something like this: when span is :after / checkBox is checked ans then script run. .selector:after will change border color that will show selector with a specific dynamically color using $(".selector").css("border", "solid " + "Red");

$(document).ready(function() {

});
.checkBox {
  display: block;
  position: relative;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* hide default checkBox */
.checkBox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* create "checkbox" */
.selector {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background: #fff;
  border-radius: 4px;
  border-width: 1px;
  box-shadow: inset 0px 0px 10px #ccc;
}

/* selector (hide it when checkBox not checked) */
.selector:after {
  content: "";
  position: absolute;
  display: none;
}

/* show selector (when checkBox checked) */
.checkBox input:checked~.selector:after {
  display: block;
}

/* selector style */
.checkBox .selector:after {
  left: 9px;
  top: 7px;
  width: 5px;
  height: 10px;
  border: solid #1F4788;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="checkBox">
  <input type="checkbox" value="x" name="x" id="x" />
  <span class="selector"></span>
</label>

FIX/SOLUTION: I Did found the solution, thanks all for the Help: in CSS file:

 .checkBox .selector:after {
  left: 9px;
  top: 7px;
  width: 5px;
  height: 10px;
  border: solid;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

and in script JQuery on View add:

$(document).ready(function() {
$(".selector").css("color", "@ViewBag.vbColor");
});

ViewBag.vbColor, it will be a dynamic color coming from controller that acess a database table with specific colors. Thanks for all the help shared. :)

Nelson Martins
  • 57
  • 1
  • 1
  • 8
  • 3
    Your question isn't clear. Could you please describe exactly what you want to happen and under what conditions. – Rory McCrossan Oct 17 '18 at 09:01
  • Hi there yes, the label is simulating a style of a checkbox, then im using a checkbox to use it as trigger and then on span accordingly with checkbox cheked or not im apllying a dinamicaly color to the selector for user interface, once the page is rendered the checked/ not checked will show a specific style – Nelson Martins Oct 17 '18 at 09:03
  • 2
    Sorry, that still doesn't make much sense. – Rory McCrossan Oct 17 '18 at 09:04
  • 1
    So if the checkbox is checked what should happen, what should the `` look like? As Rory says the current description is unclear; I assume English is not your first language (and that's not a problem!), if you have a friend or colleague that could help you with the explanation that would be good. – David Thomas Oct 17 '18 at 09:07
  • I want to change a specific color with JQuery, replacing border: solid #1F4788 from .selector:after css, border: solid #1F4788; -> this will simulate a selector checked, I would like to know if theres a way to change this color with JQuery. – Nelson Martins Oct 17 '18 at 09:08
  • Possible duplicate of https://stackoverflow.com/questions/5041494/selecting-and-manipulating-css-pseudo-elements-such-as-before-and-after-usin – misorude Oct 17 '18 at 09:08
  • Hi there David, if the checkbox is checked, css .selector:after will trigger and show border color as selector. – Nelson Martins Oct 17 '18 at 09:09
  • 1
    If the changes are triggered on selecting the checkbox, then you can simply use CSS: `.checkbox:checked + span::after { /* style */ }` But since you mention the same `border` property-value twice in your previous comment to me, I'm unsure quite what you want. – David Thomas Oct 17 '18 at 09:13
  • Hello, misorude, the color will be coming from a table from a db, then it will be applied on a mvc controller then it will be used in View with ViewBag and rendered with JQuery. is there a way to change this color this way using a specific color in span:after? – Nelson Martins Oct 17 '18 at 09:14
  • Yes David thats what I want. I want to remove the previous border color from css, and aplly it with a new one on runtime, using JQuery, that's my problem, so when is checked it shows a specific color, but im not sure how to do that, I've been trying with JQuery .css changes but im not getting there on applying it. – Nelson Martins Oct 17 '18 at 09:26
  • Hi all, actually I finally did it. On css file, on class .checkBox .selector:after{left: 9px; top: 7px; width: 5px; height: 10px; border: solid; border-width: 0 2px 2px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);} then on JQuery I simply did $(document).ready(function() { $(".selector").css("color", "@ViewBag.vbColor"); }); - "@ViewBag.vbColor it will be the dynamic color, coming from a controller that acess a table on a database and it worked thanks all for help hope it will help someone:) – Nelson Martins Oct 17 '18 at 15:50

2 Answers2

0

.checkBox {
  display: block;
  position: relative;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* hide default checkBox */
.checkBox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* create "checkbox" */
.selector {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background: #fff;
  border-radius: 4px;
  border-width: 1px;
  box-shadow: inset 0px 0px 10px #ccc;
}

/* selector (hide it when checkBox not checked) */
.selector:after {
  content: "";
  position: absolute;
  display: none;
}

/* show selector (when checkBox checked) */
.checkBox input:checked~.selector:after {
  display: block;
}

/* selector style */
.checkBox .selector:after {
  left: 9px;
  top: 7px;
  width: 5px;
  height: 10px;
  border: solid #1F4788;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="checkBox">
  <input type="checkbox" value="x" name="x" id="x" />
  <span class="selector"></span>
</label>
Mehdi Hatami
  • 1
  • 2
  • replace border: solid #1F4788 border-width: 0 2px 2px 0; with border: solid #1F4788 ; border-width: 0 2px 2px 0; – Mehdi Hatami Oct 17 '18 at 09:27
  • hi Mehdi, that's what I have, but it was changed from my original post. what I would like to do is change with JQuery document ready function using a css JQuery change, to use any color I want and remove defenitly border: solid #1F4788; from css file. – Nelson Martins Oct 17 '18 at 09:36
  • it's impossible to directly modify the :after content. – Mehdi Hatami Oct 17 '18 at 11:14
  • Yes Mehdi I did realize that shame though, anyway i'll keep working on a solution, thanks for feedback :( – Nelson Martins Oct 17 '18 at 13:20
0

please define class in stylesheet 

.checkedColor{
   border: 2px solid red;
 }

and added below code with jquery

$('label > span.selector').click(function(){

       $(this).toggleClass('checkedColor');

});
sajjad
  • 477
  • 5
  • 12