Style FileUpload button in PF 5.3

[marlonmin]

Hi, i am using PrimeFaces 5.3 and I want to style the button. This is the xhtml:

Code: Select all

<style>
.ui-fileupload-buttonbar {
	margin: 0px 0px 0px 0px !important;
	padding: 0px 0px 0px 0px !important;
	border: none;
}

.ui-fileupload {
	margin: 0px 0px 0px 0px !important;
	padding: 0px 0px 0px 0px !important;
	display: inline-block;
	border: none;
}

.ui-fileupload-content {
	display: none;
}
</style>

</h:head>
<h:body>

	<h:form>
		<p:fileUpload fileUploadListener="#{fileUploadView.handleFileUpload}"
			mode="advance" dragDropSupport="false" multiple="true"
			update="messages" sizeLimit="100000" fileLimit="3"
			allowTypes="/(\.|\/)(gif|jpe?g|png)$/" />

		<p:growl id="messages" showDetail="true" />
	</h:form>
</h:body>

is this the right way to style? How to make the "choose", "upload" and "cancel" buttons become smaller? and how to style the button's color?

[kukeltje]

Learn css specificity: https://developer.mozilla.org/en-US/doc ... pecificity. Play with css in your favourite browser developer tool.

[marlonmin]

Code: Select all

<div id="j_idt5:j_idt6" class="ui-fileupload ui-widget">
   <div class="ui-fileupload-buttonbar ui-widget-header ui-corner-top">
     <span class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-left ui-fileupload-choose">

The source code looks like this. Usually a css class has one name, but why here it has several, i.e. "ui-fileupload-buttonbar ui-widget-header ui-corner-top". It has three.

• ui-fileupload-buttonbar
  ui-widget-header
  ui-corner-top

when I style it, should I just style "ui-fileupload-buttonbar" here, for example? Thanks.

[kukeltje]

Sorry but this is an even more basiccss question... please find some decent tutorials on css. Google is your friend, but since I'm in a good mood: http://htmldog.com/guides/css/