You are viewing limited content. For full access, please sign in.

Question

Question

Change Upload button color?

Version 10 Forms
Updated January 19, 2018
asked on January 19, 2018

Good Morning Everyone in Laserfiche Land,

Does anyone know if you can change the color of the File Upload button background and the font color of the the file upload field on forms?  I am just looking to draw more attention to it. 

Thanks!

Drew 

0 0

Answer

SELECTED ANSWER
replied on January 19, 2018 • Show version history

If you're targeting the file upload button in general, you may try something like:

.fileuploader
{
background-color:#2ab; 
border-color:#2bc!important; 
color:white;
}

The background-color sets the button face, the border-color sets the outside edge, and the color sets the text color. 

If you wanted to change a particular file upload button only, the CSS is the same but the selector changes a bit to:

input#Field1_old.fileuploader
{
  background-color:#2ab; 
  border-color:#2bc!important;
  color:white;
}

 

1 0

Replies

replied on January 19, 2018 • Show version history 

#Field1 .btn {
  border: 2px solid #005782;
  color: #005782;
  background-color: white;
  padding: 8px 20px;
  border-radius: 8px;
  font-size: 20px;
  font-weight: bold;
}

 

Color is your font and background-color is the button colour itself. 

If you want some extra usability, add #Field1:hover{  color: yourcolor; background-color: yourcolor; } so it changes colour and text on the hover over. 

replied on January 19, 2018

Hey Alex!

Thanks for helping me out here.  I pasted that in my CSS and changed the color value but unfortunately it didn't change the color of the button.  Do I need to specify the field ID somewhere? 

replied on January 19, 2018 • Show version history

Hi Drew,

Deleted my old response as it looks like it may be a bit different now!

(change Field1 for what ID your button is, you can see this from the CSS / javascript preview pane)

#Field1_old{

background-color: red;

color:white;

}

 

0 0
replied on January 19, 2018 • Show version history

Alex, this is successful in turning the entire field red when I point it to the ID I am working with but I'm looking to just change the color of the button itself from gray.

0 0
replied on January 19, 2018

With some trial and error I think I have it working but I'm sure it can still be cleaned up a bit:

button, html input[type=button], input[type=reset], input[type=submit] {
    -webkit-appearance: button;
    cursor: pointer;
    background-color: #1d98ae;
      color: white;
      font-weight:bold;
}

0 0
SELECTED ANSWER
replied on January 19, 2018 • Show version history

If you're targeting the file upload button in general, you may try something like:

.fileuploader
{
background-color:#2ab; 
border-color:#2bc!important; 
color:white;
}

The background-color sets the button face, the border-color sets the outside edge, and the color sets the text color. 

If you wanted to change a particular file upload button only, the CSS is the same but the selector changes a bit to:

input#Field1_old.fileuploader
{
  background-color:#2ab; 
  border-color:#2bc!important;
  color:white;
}

 

1 0
replied on January 19, 2018 • Show version history

Perfect Karina!  I knew what I had wasn't quite right. Thanks so much for helping me out!

Drew

0 0
You are not allowed to follow up in this post.

Sign in to reply to this post.

Details
Related Posts
Loading ...