我有这个
https://codepen.io/anon/pen/RgQOWz
放置任何值,当重复单击减少/减少时,输入框文本将突出显示哪个不是我想要发生的.
- body {
- margin: 20px;
- }
- input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button {
- -webkit-appearance: none;
- margin: 0;
- }
- .prdin {
- text-align: center;
- background: #f5f5f5;
- width: 40px;
- border: 1px solid #ccc;
- border-top: 0px;
- margin: 20px;
- }
- .prdin div {
- display: flex;
- height: 37px;
- justify-content: center;
- align-items: center;
- border-top: 1px solid #ccc;
- -webkit-touch-callout: none;
- -webkit-user-select: none;
- -khtml-user-select: none;
- -moz-user-select: none -ms-user-select: none;
- user-select: none;
- }
- .prdin input {
- text-align: center;
- border: 0px;
- height: 100%;
- width: 100%;
- font-size: 18px;
- font-weight: bold;
- }
- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
- <!-- For icon styles -->
- <link href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.css" rel="stylesheet" />
- <div class="prdin">
- <div class="increment">
- <i class="icon-arrow-up icons"></i>
- </div>
- <div id="input1">
- <input type="number" class="score" value="0">
- </div>
- <div class="decrement">
- <i class="icon-arrow-down icons"></i>
- </div>
- </div>
- <div class="prdin">
- <div class="increment">
- <i class="icon-arrow-up icons"></i>
- </div>
- <div id="input1">
- <input type="number" class="score" value="0">
- </div>
- <div class="decrement">
- <i class="icon-arrow-down icons"></i>
- </div>
- </div>
解决方法
你可以使用user-select:none;在div上禁用选择/突出显示.
- body {
- margin: 20px;
- }
- input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button {
- -webkit-appearance: none;
- margin: 0;
- }
- .prdin {
- text-align: center;
- background: #f5f5f5;
- width: 40px;
- border: 1px solid #ccc;
- border-top: 0px;
- margin: 20px;
- }
- .prdin div {
- display: flex;
- height: 37px;
- justify-content: center;
- align-items: center;
- border-top: 1px solid #ccc;
- -webkit-touch-callout: none;
- -webkit-user-select: none;
- -khtml-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- }
- .prdin input {
- text-align: center;
- border: 0px;
- height: 100%;
- width: 100%;
- font-size: 18px;
- font-weight: bold;
- }
- <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
- <link href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.css" rel="stylesheet"/>
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
- <div class="prdin">
- <div class="increment">
- <i class="icon-arrow-up icons"></i>
- </div>
- <div id="input1">
- <input type="number" class="score" value="0">
- </div>
- <div class="decrement">
- <i class="icon-arrow-down icons"></i>
- </div>
- </div>