目前我需要制作一个输入字段,通过点击它来改变里面的值。我想使用 CSS 使该字段在未被单击时看起来更像一个按钮。有没有我可以遵循的示例 CSS?这是我的示例代码:https://jsfiddle.net/TasteMyBiceps/sxw29n38/ .谢谢!
$(document).ready(function(){
$('#inp').prop('readonly','true');
$('#inp').click(function(){
if($(this).val()==""){
$(this).val("Yes");
}
else{
$(this).val("");
}
$(this).toggleClass('inputClick');
});
});
#inp {
width: 40px;
text-align: center;
}
.inputClick {
background: #D8D8D8;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.js"></script>
<input id="inp" type=text />
最佳答案
您可以使用 border-style
设置为 outset
input {
background:#eee;
border-style:outset;
}
$(document).ready(function() {
$('#inp').prop('readonly', 'true');
$('#inp').click(function() {
if ($(this).val() == "") {
$(this).val("Yes");
} else {
$(this).val("");
}
$(this).toggleClass('inputClick');
});
});
input {
background:#eee;
border-style:outset;
}
#inp {
width: 40px;
text-align: center;
}
.inputClick {
background: #D8D8D8;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.js"></script>
<input id="inp" type=text />
关于jquery - 如何使用 CSS 使输入字段的行为类似于单击按钮?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36172180/