Feedback on Survey Page - 2nd Project

Project Feedback
#1

Hello,

This is my 2nd project - would appreciate feedback!

Also for the upload file document button I was only able to put a background around it:

.attach-button {
display: block;
width: 21%;
padding: 0.5rem;
background: var(–color-yellow);
color: inherit;
border-radius: 10px;
cursor: pointer;

Does anybody know how to actually edit the button itself like the submit button below it?

Thank you :slight_smile:

#2

Try this, wrap the file input element with a label:

<label class="custom-file-upload">
    <input type="file"/>
    Upload File
</label>

Then hide the input element using the [attribute selector]

input[type="file"] {
    display: none;
}

After that do the styling using custom label element.

.custom-file-upload {
    border: 1px solid #00F;
    display: inline-block;
    cursor: pointer;
    /* and so on...*/ 
}

Remember that if you hide the element using display: none , it won’t work in IE8 for example.

I believe that may work… let me know :wink:

#3

I put it in and it works!

Thank you :smiley:

1 Like
#4

Your form looks good @tyui78. Some things to revisit;

  • Run your HTML code through the W3C validator.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
    • There are HTML coding errors you should be aware of and address.
  • Codepen provides validators for HTML, CSS and JS. Click on the down arrow in the upper right of each section and then click on the respective ‘Analyze’ link.
    • The one for CSS is good. Use it, there are things to clean up.
      • You may have to do it more than once after cleaning up the first warning. They may affect the way your page displays.
    • The one for HTML misses things which is why I recommend W3C
  • Make all of your styling external
  • The required field ‘company name’ should not be validated as if it were an email address.
  • Maybe make the submit button look like a button instead of a bar.
#5

Good to know it helped.
Keep up the good work.!!!

#6