Changing input into Button

Question

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> 

-->

rgtk · Accepted Answer · 2016-02-06 22:36:13Z

2

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/

edited Feb 6, 2016 at 22:36

answered Feb 6, 2016 at 22:23

rgtk

3,5302 gold badges33 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ErraticFox Over a year ago

Works perfectly! I was unaware of the "for" property.

Collectives™ on Stack Overflow

Changing input into Button

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related