Clever Geek Handbook

Rename the button text without ID

I have html as:

<div class="k-button k-upload-button">
<input id="files" name="files" type="file" data-role="upload" autocomplete="off">
<span>Select files...</span>
</div>

Above html text (tags) I cannot change.

I just want to change the text:

Select files...

To:

Select file

For this I tried:

$(".k-button.k-upload-button").find("span").text("Select file");

But it didn't work.

Please help me. How can I change the text ???

EDIT1:

enter image description here

.k-upload-button span:before {
    content: 'Select File';
     position: relative;
     left: 4444px;
    display: inline;
}
.k-upload-button span {
    position: relative;
   left: -4444px;
  display: inline;
}
+3


source to share


4 answers


CSS solution

The span is removed from the viewport, and its pseudo-child returns to its place.

Give an example!



CSS

.k-upload-button span {
    position: relative;
    left: -9999px;
}
.k-upload-button span:before {
    content: 'Select file';
    position: relative;
    left: 9999px;
}
+3


source


try it



document.getElementById("files").innerHTML  = "Select file";
0


source


You can simply use .find 

$('.k-button').find('span').html('Select File');

Or using .parent() 

$('.k-button').parent().find('span').html('Select File');

Or instead of trying to select an item, why not give id 

$('#d-span').html('Select File');

jsfiddle here

Hope it helps

0


source 


$("span",$('.k-button').parent()).text("New Text");
0


source






More articles:


All Articles