Style Attachments box

Answered

Maria Giugno

• Edited March 06, 2024 15:46

Can we style the Add attachments on the form when you add the Attachments field?

We would like them to be able to see an icon rather than the Add attachments text. Is this possible?

.sb-field-label {
  display: none;
}

.uploadLink_447c849e {
  font-size: 25px;
  background-color: rgba(0, 0, 0, 0);
  border: 0;

Can it be turned into a paperclip icon button?

 

Thank you!

1

• 

  Matthias_Walter

  • February 28, 2024 15:59

  Hi Maria Giugno,

  you can achieve this by adding a style using our style editor like this:

  

  Scroll to the bottom and add the following into the CSS text box:

  

  .sb-field-input button {
    visibility: hidden;
  }
  
  .sb-field-input button::before {
    visibility: visible;
    content: "";
    font-family: "Fluent MDL2 Hybrid Icons";
  }
  
  .sb-field-input {
    background-color: "[theme: bodyBackground]";
    border-width: 0px;
  }

  The result will look like this:

  

  Best Regards
  Matthias

  1
• 

  Maria Giugno

  • March 06, 2024 15:52
  • Edited

  Hi Matthias,

   

  Thank you! This worked for me. I only changed the CSS slightly for a transparent background and increased the Font size:

   

  .sb-field-input button {
    visibility: hidden;
  }
  
  .sb-field-input button::before {
    visibility: visible;
    content: "";
    font-family: "Fluent MDL2 Hybrid Icons";
  }
  
  .sb-field-input {
    background-color: rgba(0, 0, 0, 0) ;
    border-width: 0px;
  }
  
  .uploadLink_447c849e {
    font-size: 25px;
    }
  
  .sb-field-label {
    display: none;
  }

  1
• 

  Maria Giugno

  • March 06, 2024 16:51

  Hi Matthias,

  When I save, I can only see a box with a question mark in it. In the design form mode it worked, but when you click save and test it doesn't work live.

   

  Please advise.

  0
• 

  Maria Giugno

  • March 06, 2024 17:28

  

  0
• 

  Maria Giugno

  • March 06, 2024 18:11
  • Edited

  I figured this out:

  .sb-field-input button {
    visibility: hidden;
  }
  
  .sb-field-input button::before {
    visibility: visible;
    content: "\E16C";
    font-family: "Segoe MDL2 Assets";
  }
  
  .sb-field-input {
    background-color: rgba(0, 0, 0, 0) ;
    border-width: 0px;
  }
  
  .uploadLink_447c849e {
    font-size: 25px;
    }
  
  .sb-field-label {
    display: none;
  }

   

   

  0

Please sign in to leave a comment.