How to write style to change color of button for <fileUpload> component?

57 views

Skip to first unread message

Tomas Vaverka

unread,

Jan 10, 2017, 10:37:42 AM1/10/17

to InterSystems: Zen Community

This is probably more css/html than Zen question.

Is there any way how to change the color of button for <fileUpload> component? This is an extract from simple Zen Page:

XData Style
{
<style type="text/css">
.button {
      background:#C1CC80;
      border: 1px solid #5E7703;
      color:black;
      padding:10px;
      padding-top:5px;
      padding-bottom:5px;
}

.fileUpload {
      background:#C1CC80;
      border: 1px solid #5E7703;
      color:black;
      padding:10px;
      padding-top:5px;
      padding-bottom:5px;
}
</style>
}

/// This XML block defines the contents of this page.
XData Contents [ XMLNamespace = "http://www.intersystems.com/zen" ]
{
<page xmlns="http://www.intersystems.com/zen" title="">
<fileUpload id="fileupload" width="120px"/>
<button id="Upload" caption="Upload" width="50px" onclick="alert('Uploaded');"/>
</page>
}

It works for <button> but not for <fileUpload>.

<fileUpload> is just wrapper around the <button type=file> HTML tag. I have searched on internet and haven't found any simple way how to change color even for simple HTML page:

<html><head>
<style>
.button {
      background:#C1CC80;
      border: 1px solid #5E7703;
      color:black;
      padding:10px;
      padding-top:5px;
      padding-bottom:5px;
}

.styled input[type="file"] {
      background:#C1CC80;
      border: 1px solid #5E7703;
      color:black;
      padding:10px;
      padding-top:5px;
      padding-bottom:5px;
}
}
</style>
</head>

<body>
<div class="styled">
<input type="file" name="files[]" id="d"/>
</div>
<div id="Upload">
<input type="button" class="button" value="Upload"/>
</div>
</body></html>

Is there any solution? Is there any other attribute for button of input[type="file"] style?

Thank you.

Stefan Wittmann

unread,

Jan 11, 2017, 4:40:34 AM1/11/17

to intersys...@googlegroups.com

Styling file inputs is notoriously difficult and inconsistent across vendors…

A very thorough discussion and different variants of solutions can be found here:

http://www.quirksmode.org/dom/inputfile.html

HTH,

Stefan

--
You received this message because you are subscribed to the Google Groups "InterSystems: Zen Community" group.
To post to this group, send email to InterSys...@googlegroups.com
To unsubscribe from this group, send email to InterSystems-Z...@googlegroups.com
For more options, visit this group at http://groups.google.com/group/InterSystems-ZEN?hl=en
Zen Community Terms and Conditions: http://groups.google.com/group/InterSystems-ZEN/web/community-terms-and-conditions
---
You received this message because you are subscribed to the Google Groups "InterSystems: Zen Community" group.
To unsubscribe from this group and stop receiving emails from it, send an email to intersystems-z...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Reply all

Reply to author

Forward

0 new messages