Question

这应该很容易。创建一个由http://www.cssbuttongenerator.com/提供的样式化css no-framework“按钮”，该按钮在我的代码和jsfiddle of it中表现不同 - 当鼠标悬停在按钮内的文本时，鼠标图标会发生变化由用户选择。如何避免这种情况？

CSS：

  .simpleButton {

    -moz-box-shadow:inset 0px 1px 0px 0px #cae3fc;
    -webkit-box-shadow:inset 0px 1px 0px 0px #cae3fc;
    box-shadow:inset 0px 1px 0px 0px #cae3fc;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #4197ee) );
    background:-moz-linear-gradient( center top, #79bbff 5%, #4197ee 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#4197ee');
    background-color:#79bbff;
    -webkit-border-top-left-radius:13px;
    -moz-border-radius-topleft:13px;
    border-top-left-radius:13px;
    -webkit-border-top-right-radius:13px;
    -moz-border-radius-topright:13px;
    border-top-right-radius:13px;
    -webkit-border-bottom-right-radius:13px;
    -moz-border-radius-bottomright:13px;
    border-bottom-right-radius:13px;
    -webkit-border-bottom-left-radius:13px;
    -moz-border-radius-bottomleft:13px;
    border-bottom-left-radius:13px;
    text-indent:0;
    border:1px solid #469df5;
    display:inline-block;
    color:#ffffff;
    font-family:Arial;
    font-size:15px;
    font-weight:normal;
    font-style:normal;
    height:45px;
    line-height:45px;
    width:133px;
    text-decoration:none;
    text-align:center;
    text-shadow:1px 1px 0px #287ace;
  }
  .simpleButton:hover {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #4197ee), color-stop(1, #79bbff) );
    background:-moz-linear-gradient( center top, #4197ee 5%, #79bbff 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4197ee', endColorstr='#79bbff');
    background-color:#4197ee;
  }
 .simpleButton:active {
    position:relative;
    top:1px;
  }

Answer 1

您可以使用user-select: none;来阻止选择文字：

.simpleButton {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: default;
    /* other styles... */
}

<强> Working Demo

请注意，这是一个实验性（非标准）功能需要供应商前缀。

Answer 2

你想要“默认”光标：

cursor:default;

这是禁用突出显示（https://stackoverflow.com/a/4407335/1253034）

的一种方法

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

Answer 3

使用cursor属性。

.simpleButton { cursor: pointer }

CSS'按钮'不必要地允许文本选择

3 个答案: