Question

正如您所看到的，这是图像背后的按钮。我想删除那个按钮。并将图像用作按钮

.buttonup {
  padding: 0px;
  width: 25px;
  cursor: pointer;
  margin-right: 25px;
}

.buttondw {
  width: 25px;
  cursor: pointer;
  margin-left: 25px;
}

#count {
  display: inline-block;
  border-radius: 0px;
  background-color: #ff9933;
  border: none;
  color: #ffffff;
  text-align: center;
  font-size: 18px;
  padding: 5px;
  width: 50px;
  margin-top: 0px;
}

<center>
  <button class="buttonup" id="plus" style="vertical-align:middle"><span><img src="http://i.imgur.com/jWPUjR9.png"> </span> </button> <span id="count">0</span>
  <button class="buttondw" id="minus" style="vertical-align:middle"><span><img src="http://i.imgur.com/Vu6tuf9.png"> </span> </button>
</center>

Answer 1

使用input type =“image”

如果您不想提交页面或其中的表单，则需要在click事件上使用preventDefault（）

.buttonup {
  padding: 0px;
  width: 25px;
  cursor: pointer;
  margin-right: 25px;
}

.buttondw {
  width: 25px;
  cursor: pointer;
  margin-left: 25px;
}

#count {
  display: inline-block;
  border-radius: 0px;
  background-color: #ff9933;
  border: none;
  color: #ffffff;
  text-align: center;
  font-size: 18px;
  padding: 5px;
  width: 50px;
  margin-top: 0px;
}

<center>
  <input type="image" class="buttonup" id="plus" style="vertical-align:middle" src="http://i.imgur.com/jWPUjR9.png" /> <span id="count">0</span>
  <input type="image" class="buttondw" id="minus" style="vertical-align:middle" src="http://i.imgur.com/Vu6tuf9.png" />
</center>

Answer 2

你实际上非常接近，juste在你的课堂上添加背景：none和border：none：

.buttonup {
  padding: 0px;
  width: 25px;
  cursor: pointer;
  margin-right: 25px;
  background:none;
  border:none;
}

Answer 3

更改一些css

{{1}}

https://fiddle.jshell.net/g6Lhurae/25/

Answer 4

试试这个：

.buttonup {
  padding: 0px;
  text-align: center;
  width: 50px;
  cursor: pointer;
  margin-right: 10px;
  border:none;
  background:none;
}


.buttondw {
  width: 50px;
   text-align: center;
  cursor: pointer;
  margin-left: 5px;
  border:none;
  background:none;
}

Answer 5

提示：请勿在html中使用center标记;它已被弃用，并且在html5中不受支持。（我知道这不是问题，但应该指出它。）

所以我的css / html对你来说如下（从mplungians帖子算起css）

var counter = 0, // Try change this what ever you want
  votePlus = counter + 1,
  voteMinus = counter - 1;

function checkIfUserVoted() {
  return localStorage.getItem("voted");
}
if (!localStorage.getItem("voted")) {
  localStorage.setItem("voted", counter);
  $("#count").text(counter);
}
$(".buttonup").click(function() {
  var vote = checkIfUserVoted() != votePlus ? votePlus : counter;
  localStorage.setItem("voted", vote);
  $(this).next().text(vote);
});
$(".buttondw").on('click', function () {
  var vote = checkIfUserVoted() != voteMinus ? voteMinus : counter;
  localStorage.setItem("voted", vote);
  $(this).prev().text(vote);
});

#buttons{margin-left: 35%; margin-right:35%;}
.buttonup {
  padding: 0px;
  width: 25px;
  cursor: pointer;
  margin-right: 25px;
}
.buttondw {
  width: 25px;
  cursor: pointer;
  margin-left: 25px;
}

#count {
  display: inline-block;
  border-radius: 0px;
  background-color: #ff9933;
  border: none;
  color: #ffffff;
  text-align: center;
  font-size: 18px;
  padding: 5px;
  width: 50px;
  margin-top: 0px;
}


.buttondw {
  width: 25px;
  cursor: pointer;
  margin-left: 25px;
}








#count {
 display: inline-block;
  border-radius: 0px;
  background-color: #ff9933;
  border: none;
  color: #ffffff;
  text-align: center;
  font-size: 18px;
  padding: 5px;
  width: 50px;
  margin-top: 0px;
  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="buttons">
<input type="image" class="buttonup" id="plus" style="vertical-align:middle" src="http://i.imgur.com/jWPUjR9.png" /> <span id="count">0</span>
  <input type="image" class="buttondw" id="minus" style="vertical-align:middle" src="http://i.imgur.com/Vu6tuf9.png" />
      
</div>

如何将图像用作按钮？

5 个答案: