get a pseudo-element created from css before selector

[Phaelax]

Doing a custom file upload button like so:

CSS:

input[type="file"]::-webkit-file-upload-button{ visibility:hidden;width:0;height:0;}
input[type="file"]{font-size:30px !important;background:none !important;}
input[type="file"]::before{
  content: 'Select an image';
  display: inline-block;
  background: -webkit-linear-gradient(top, #f9f9f9, #e3e3e3);
  border: 1px solid #999;
  border-radius: 3px;
  outline: none;
  white-space: nowrap;
  -webkit-user-select: none;
  cursor: pointer;
  text-shadow: 1px 1px #fff;
  font-size: 40px;
  margin:auto auto;
  text-align:center;
  line-height:80px;
  width:624px;
  height:80px;border:0;border-radius:40px;
  margin-left:-24px;

}

HTML:

<input name="uploaded_file" id="uploaded_file" type="file" onchange="thing()"/>

JS:

function thing(){

    var t = document.getElementById("uploaded_file");
    var f = t.files[0].name;
}

All I know is how to retrieve the name of the selected file to upload, but I can't figure out how to change the name of the button displayed. I can't figure out how to select that element since it has no ID or name. I read somewhere that using BEFORE will create a child of the element that created it, but when I get the element ('t' in this case) it says there are no children.

[pixelsoul]

Is this what you're trying to do? http://jsfiddle.net/pixelsoul/o35nycrp/

[Phaelax]

That only demonstrates what the code already does. I need to change the text of "Select an image" to the name of the selected file.

Basically, how do I select this element input[type="file"]::before in javascript?

[pixelsoul]

Sorry, your description gave me the impression you wanted to actually change the name attribute, not the buttons label.

I can show you the javascript to target the value of pseudo-elements, but it won't do you any good, because pseudo-elements are not part of the DOM, and JavaScript can't interract with it.

In case you ever wanted to retrieve the content value of this
window.getComputedStyle(document.getElementById("selector"), ':before').getPropertyValue('content');

I would probably change the style of the button to not use a pseudo-element and rather something that is accessible through the DOM.