Bs 3 registration form

thank you.
the problem is as I test the city field it gets darkgreen and I don’t understand it, please help me, thank you.

Is this a new question?

You were talking about the cities dropdown which you still don’t seem to have fixed.

The cities dropdown is lightgreen background with a darkgreen rollover. That seems to be the way you styled it.

1 Like

If you had done as requested previously, removed the commented-out CSS and validated the page, then you would have found CSS errors (including the nested comment I have already drawn to your attention).

The first step in debugging is always to validate the code and fix errors. If you need help in understanding errors shown by the validator, then ask here, but please make a start yourself.

You have also been shown how to use CodePen correctly, so please do so in future.

1 Like

to be honest, I separated the problematic parts to make easier the examination, so the rest is to ignore. when we work, always make decisions what to sort out and what to ignore.
my problem, is that as I changed the script, I don’t know if I’ve done it in the right way, and the the ‘hover effect’ with dark green color appeared. this where I need help to fix it. thank you.

If you want people to help you, you need to have your code easy to understand. If it’s difficult to follow, people won’t bother.

1 Like

You might find it helpful to read this thread on posting code, especially post number 5.

You need to remove the extraneous code before posting. Other people don’t know what is relevant and what is not, so it’s up to you to provide a clean example to work from.

2 Likes

I have multiple scripts, that is why separated the problematic part to help supporters.

But you have posted in the HTML/CSS forum, asking about a styling issue. That suggests the problem lies with your CSS, which is invalid. The number of scripts you have is not relevant to dealing with the issue, and you need to put everything in the correct sections of your CodePen to enable others to find the information they need.

If I am right in this matter leave the scripts and at this stage post just html and css, please let me know if I misunderstood the suggestion,thank you.

If you read the thread I linked to above, the advice is to post the minimal amount of code required to reproduce the problem. If the problem still exists when the JS is removed, then there is no need to include it.

unfortunately the problem exists and I don’t understand it. it started with implementing the “city experiment”. separate it works fine but as I added to register , this unexpected css problem occurred and I don’t understand it why. there are js relevant to css on the head section that is separate from the bottom one which is for filtering data to be entered.

So is this a third question now about a hover effect. ?

All those fields go darkgreen when focussed in your codepen so why have you singled out the City field. is there something different about it?

It’s still not working in your codepen because you removed both jquery and not just one. It won’t work without jquery.

If you replace jquery in the correct place.

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Then the dropdown will start working and your city field will no longer be darkgreen. You are styling those elements by dynamically adding classes so if the js is not working neither will the class be added or take effect.

1 Like

so this is to be replaced>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

these are the current scripts

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <!--
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>-->
and still I have the same problem

There is no script like that in your codepen demo so how can you replace it?

You have this only:

  <!-- 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> -->

It is commented out. Remove the html comments.

You really must look at your code and understand it. Most problems stick out like a sore thumb if you don’t blindly copy and paste. :wink:

1 Like

I posted above the current scripts but still is not working and I don’t understand it, I just copy and pasted my experiment from inputwithdropdown where the code base is the city one from register.
this problem occurred persists still and on the other fields too. I don’t understand it. the js (jquery) on head section is for hovering effect. thank you

Please post your updated code.

No you are controlling many styles with jquery.

e.g.

$(".re-field").on("mouseleave", function () {
    $(".re-field").css("background-color", "lightgreen");
  });
1 Like

yes, but darkgreen on clicking on the choosen field is unexpected.
my code update is
register

Did you post the wrong link by mistake? That seems to be the same CodePen you linked to in your first post.

I updated the js, conform instruction, the rest looks ok