简体   繁体   中英

Add an icon image on top of an html input type=button

I need to add an .PNG image on top of my css button, the image will be a hamburger menu icon to show that the button is expandable.

These are my buttons.

这些是我的按钮

The buttons are created with this HTML:

                    While($row1=mysql_fetch_array($retServerNames)){

                        $serverID = $row1['id'];
                        $serverName = $row1['servername'];



                        echo"<input type='button' id='$buttonId' class='btn' name='show' value='".$serverName."' onclick='javascript:showServer(".$buttonId.");'
                            style='width: 90%; margin: 1%; text-align:left;'>";

                        echo"<div id='$serverName' style='margin: 3%; display:none;'>";

                        echo"<table style='border-bottom: 1px solid black;' cellspacing='10px'>

                                            <thead>
                                                <tr>
                                                    <th></th>
                                                    <th>Task</th>
                                                    <th>Status</th>
                                                    <th>Agent</th>
                                                    <th>Date Completed</th>
                                                    <th></th>
                                                </tr>
                                            </thead>";      

I have tried putting both the image tag and the input type inside a div element and tired to position the image over the button with no success, is there a better way to do this? or can any one suggest an alternative element that will allow me to do this more easily than the button element? thank you in advance.

The easy way is to use an actual button element.

<button type="button"
        id="<?php echo htmlspecialchars($buttonId); ?>"
        onclick="showServer(this.id);">
    <img src="hambuger.png" alt="">
    <?php echo htmlspecialchars($serverName); ?>
</button>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM