CSS Transitions Issue for CheatSheet Project, Help with CSS needed

Language Help
1

Hello!

My name is Robert Pfaff. I finished the Machine Learning - Python path and submitted the capstone project.

Now I have moved on to the Full Stack Web Development/Engineer path.

I have a strong background coding in Python, intermediate Javascript, HTML and some CSS, but it looks like the standards have changed (?). I am struggling with CSS issues for the Build a CheatSheet Assingment. The older documentation does not offer the solution I need.

It isn’t. I could use some assistance from anyone who understands today’s CSS standards and especially transitions. It seems like an easy fix, but there could be several sources of the problem as described below.

Or I may be missing the point altogether.

I only know I’m lost (lol).

Problem Statement: I want the background color of the form input field (.form_input) on line 36 in styles.css to transition from light gray to pure white on focus located on line 60 in styles.css.

.form_input:focus {
background: #ffffff;
}

But I am running into several issues with the code. The errors I stumble over concern the Line 37 (“-webkit-appearance: none;”) and Line 55 (“background: #f9f9f9;”) on Line 55 in the code below.

Possible Issues:

  1. It seems “-webkit-appearance: none” is deprecated, but I cannot find an alternative that works.

  2. I have no idea why changing the “background:” property is a problem. Switching to backgound-color does not solve the problem.

  3. My research into these issues for the past several days suggests using the flexbox model has limited my options (?) for creating transitions in the background of the input field. But I thought I would ask for some help here as I sense it’s an easy fix, with easy problem to spot for someone with the expertise.

The Goal: The goal is to transition the background color (#f9f9f9) immediately in ,25s , but I am running into issues with the CSS on several fronts. I have relied heavily on YouTube tutorials, while trying to make it my own and add new ideas. I am on my third day trying to finish the project.

(As an aside. I would like the error/warning messages to in the HTML to appear when the user has left them blank or entered a number higher than 5 as in the “number of users” second field. But I already a strong idea of what need to fix there. Just throwing it out in case anyone else has some ideas).

Here is the link to the codepen of the entie project so far. You can also see all the code and the product on Codepen by clicking in the upper right-hand corner of the embedded panel below:

Here is the code for the CSS up to the “on focus” element which changneeds to change the background color of light grey to pure white. Please let me know if you cannot access the codepen.

Otherwise, I have pasted for CSS only below for quick eyeballing.

Thank you in advance for your help.

Robert

styles.css:

@import url(‘https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;800&family=Source+Sans+3:ital,wght@0,400;0,600;1,400;1,600&display=swap’);

.form {
font-family: ‘Source Sans 3’, sans-serif;
font-size: 16px;
}

.form * {
box-sizing: border-box;
line-height: 1.5;
}

.form_title {
font-size: 3em;
font-weight: 600;
}

.form_desc {
font-size: 16px;
}

.form_item {
display: flex;
flex-direction: column;
}

.form_item > * {
align-self: flex-start;
}

.form_label > * {
font-weight: 600;
padding: 10px 0;
}

.form_input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;

width: 100%;
max-width: 425px;

/* Fix for Safari IOS */

min-height: calc(0.9em + (0.8em * 2) + 0.6em);

padding: 0.8em;
font-size: 0.9em;
font-family: ‘Source Sans 3’, sans-serif;

outline: none;
border: 1px solid #dddd;
border-radius: 4px;
background: #f9f9f9;
transition: background 0.25s, border-color 0.25s, color 0.25s;
}

.form_input:focus {
background: #ffffff;
}
.form_input::placeholder {
color: #bbbbbb;
}

.form_input–error {
color: #d50000;
background: #fff8f8;
border-color: #dd5500;
}

.form_input–error::placeholder {
color: #f1efec;
}

.form_error {
padding-top: 10px;
color: #d50000;
font-size: 0.9em;

}

.form_input–error * .form_error {
visibility: visible;
}

.form_input_small {
max-width: 300px;
}

textarea.form_input {
resize: none;
max-height: 200px;
}

.form_btn {
font-family: ‘Source Sans 3’, sans-serif;
font-weight: 600;
font-size: 1.1em;
padding: 10px 16px;
margin: 10px 0;

color: #ffffff;
background: #14b64a;
border: 2px solid #0fa942;
border-radius: 5px;

cursor: pointer;
outline: none;

}

.form_btn:active {
background: #0fa942;

}

textarea.form_input {
resize: none;
min-height: 200px;
min-width: 400px;
}@import url(‘https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;800&family=Source+Sans+3:ital,wght@0,400;0,600;1,400;1,600&display=swap’);

.form {
font-family: ‘Source Sans 3’, sans-serif;
font-size: 16px;
}

.form * {
box-sizing: border-box;
line-height: 1.5;
}

.form_title {
font-size: 3em;
font-weight: 600;
}

.form_desc {
font-size: 16px;
}

.form_item {
display: flex;
flex-direction: column;
}

.form_item > * {
align-self: flex-start;
}

.form_label > * {
font-weight: 600;
padding: 10px 0;
}

.form_input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;

width: 100%;
max-width: 425px;

/* Fix for Safari IOS */

min-height: calc(0.9em + (0.8em * 2) + 0.6em);

padding: 0.8em;
font-size: 0.9em;
font-family: ‘Source Sans 3’, sans-serif;

outline: none;
border: 1px solid #dddd;
border-radius: 4px;
background: #f9f9f9;
transition: background 0.25s, border-color 0.25s, color 0.25s;
}

.form_input:focus {
background: #ffffff;
}
.form_input::placeholder {
color: #bbbbbb;
}

.form_input–error {
color: #d50000;
background: #fff8f8;
border-color: #dd5500;
}

.form_input–error::placeholder {
color: #f1efec;
}

.form_error {
padding-top: 10px;
color: #d50000;
font-size: 0.9em;

}

.form_input–error * .form_error {
visibility: visible;
}

.form_input_small {
max-width: 300px;
}

textarea.form_input {
resize: none;
max-height: 200px;
}

.form_btn {
font-family: ‘Source Sans 3’, sans-serif;
font-weight: 600;
font-size: 1.1em;
padding: 10px 16px;
margin: 10px 0;

color: #ffffff;
background: #14b64a;
border: 2px solid #0fa942;
border-radius: 5px;

cursor: pointer;
outline: none;

}

.form_btn:active {
background: #0fa942;

}

textarea.form_input {
resize: none;
min-height: 200px;
min-width: 400px;
}

Thank you in advance for your help.

Robert :slightly_smiling_face: