CODEWITHSUNDEEP
htmlbuttoninput
ErraticFox
ErraticFox

Reputation: 1543

Changing input into Button

I am testing out Material Design Light component library.

I have some input attributes that are in the form of buttons and I was wondering how can I switch those input buttons to the button attribute because MDL uses the button attribute. Though I don't know how I'd do this and keep the properties that the input attributes have such as “accept”, “type”, etc. The code I’m testing with currently is right here:

https://jsfiddle.net/ErraticFox/46654fzy/

<input id="uploadSound" accept='audio/wav, audio/x-wav, audio/mpeg, audio/vorbis, application/ogg' type="file">

<!-- 

MDL Button:

<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
  Button
</button> 

-->

Upvotes: 0

Views: 4233

Answers (1)

rgtk
rgtk

Reputation: 3500

You can't change input to button in this case because it would lose funcionality but you can make it look like button by hiding <input> and taking advantage of <label> and it's for attribute which will delegate event to input with given id.

Example: https://jsfiddle.net/k2eau0oe/

Upvotes: 2

Related Questions