[Resolved] I’m trying to style file input button on cred form but I can’t reach it with CSS

[Author]

Posts

[matijaK]

I am trying to style my input type file button, but I cannot change any of its settings. I tried with custom css classes but it won't work. I tried applying style to classes that are already on it but I don't get the result I want. I can only change the surroundings of the button, not button itself.

I also tried to place a label on top of it and "hide" the button itself, but in that case the repetition option and the delete file option are also gone, so that is not an option for me.

I visited this URLs:
https://toolset.com/documentation/user-guides/styling-cred-forms/ and
https://toolset.com/forums/topic/how-can-i-style-the-buttons-in-cred-forms-like-upload-and-so-on/ (keithM-2 had similar issus but there was no answer offered that could help me).

This is the code of the input filed:

<div class="cred-field cred-field-datoteke">
          <label class="cred-label"> 
			<h3>Datoteke</h3>
          </label>
          [cred_field field='datoteke' post='prevod' value='' urlparam='' class='dodajdatoteko']
      	</div>

I also tried with generic fields, it did not work as expected.

I would kindly ask for your assistance.

[Noman]

Hi Matija,

Thank you for contacting Toolset Support. To style the file input button you would need to use and target CSS as follows and add it in your CRED Form’s >> CSS editor. You can change CSS style properties as desired:

/** CRED form Choose File button CSS */

input#wpcf-lecture-image_file:before {
    background: #d93434;
    content: 'Choose File';
    position: absolute;
    color: #ffffff;
    padding: 1px 6px;
	
}

input#wpcf-lecture-image_file:hover:before {
    background: #008000;
    content: 'Choose File';
    position: absolute;
    color: #ffffff;
    padding: 1px 6px;
  	cursor: pointer;
}

- Please see attached screenshot for CRED CSS editor section. This is where you will place the above CSS.

I hope it helps and have a great weekend, Thank you

[matijaK]

Hi Noman.

Thank you for your help, but it seems that the suggested solution did not solve my problem.
I still can't control how the button looks. No matter how I change the CSS style, the input button stays the same.

I looked up some websites which talk about pseudo elements on input fileds and everybody seems to agree that you are not even able to add pseudo elements on input fields:
"Because these pseudo elements are only allowed to be used on container elements. So, elements like inputs, images and any other self closing element can’t use pseudo elements because they aren’t “container elements”. Meaning, they don’t allow any nested elements or content inside of them." (source: hidden link )

I also tried wraping <input> with <span> or <div> (with some help of JS) and change CSS sytle to it, but the button itself won't change. This also only changes the surroundings of the button.

Is there another way to change it?

[Noman]

Hello Matija,

I have noticed that you are using older versions of Toolset CRED, Types and Views. Please update ALL Toolset plugins to it's latest official release version. Or you can download it from your account:
https://toolset.com/account/downloads/

After that if issue exists, we will be able to check further and in that case we may also need to request temporary WP admin login.

Thank you

[matijaK]

Hello Noman.

I've updated the Toolset plugins to latest versions.
The issue stays the same, there isn't any significant change visible.

What's the next step?

Thank you for your assistance.

[Shane]

Hi Matija,

Noman is unavailable today but would it be possible to provide a link to the page so that we can have a look ?

Thanks,
Shane

[Noman]

Hello Matija,

To debug this issue I will need to take a look at your setup. So I need to request temporary access (WP-Admin) to your site
– preferably to a test site where the problem has been replicated if possible –
in order to be of better help and check if some configurations might need to be changed.

Your next answer will be private which means only you and I have access to it.

=== Please backup your database and website ===

✙ I would additionally need your permission to de-activate and re-activate Plugins and the Theme, and to change configurations on the site. This is also a reason the backup is really important.

✙ Please add the Link to the [FORM] Edit Screen, [Page] Edit Screen where you have inserted this Form.

Looking forward to help you.
Thank you

[Noman]

Hello Matija,

I have added the CSS for the Choose file button in your page (see attached screenshot), you can modify CSS as you want.

Please check here: hidden link

Thank you

[matijaK]

Hello Noman.

I've atached some screenshots that show how the suggested solution still won't help.
If I want to add more than one file the additional CSS does not work. If I decide to delete one of the files, the additional CSS also doesn't work. And somehow it only works nicely on Chrome.

Is there another solution that is maybe more efficient?

Thanks for the help.

[Noman]

Hello Matija,

I have updated the CSS and fix this issue for Chrome. Please check here: hidden link

Firefox does not support this CSS style property. I will try to see if I can get a workaround solution for Firefox so that same style appears in Firefox browser as well.

Thank you

[Noman]

Hello Matija,

Thank you for waiting on this. I am able to find an alternate solution so that it works in both browsers efficiently. I have completed this in 2 steps now:

1. First I have added some more CSS in the page editor CSS section, as follows:

input[type="file"] {
        	background: rgba(0, 0, 0, 0) url("<em><u>hidden link</u></em>") no-repeat scroll 0 0;
        	border: medium none;
        	box-shadow: none;
        	display: inline-block;
        	font-size: 0;
        	height: 40px;
        	margin-right: 75px;
        	overflow: hidden;
        	padding-left: 132px;
        	top: 8px;
        	width: 130px;
        	cursor: pointer;
}
input[type="file"]:hover {
        	background-position: 0 -40px;
}

2. And I have added buttons as CSS image sprites so that button can be customized in both browsers. Button Image file is added via Media Library, file path is: hidden link

==> I have created the button using Photoshop, the PSD and PNG files for button are here, you can modify the button image as desired:
hidden link

I hope this resolves the issue, have a great day.
Thank you

[matijaK]

Thank you for your help.
I think now works as expected.

[mohda-2]

hi dear,,
i want to use this code to customize file upload button in cred post form but it didn't show anything,,can you tell me what is the problem ,, i want to make it same in picture..thanks