jquery - 如何使用 CSS 使输入字段的行为类似于单击按钮？

Question

目前我需要制作一个输入字段，通过点击它来改变里面的值。我想使用 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 />

Answer 1

您可以使用 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 />