CSS'按鈕'不必要地允許文本選擇

這應該很容易。在我的代碼和jsfiddle of it中創建一個樣式化的css無框架「按鈕」，http://www.cssbuttongenerator.com/，按鈕的行爲不同 - 鼠標圖標在鼠標懸停在按鈕內時會發生變化，並且用戶可以選擇文本。那將如何避免？CSS'按鈕'不必要地允許文本選擇

的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; 
    }

來源

2014-02-25 matanster

我覺得有點尷尬的兩個答案似乎是單向的正確，似乎無法確定哪一個先出現。 – matanster

你可以使用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。

請注意，這是一個實驗性（非標準）功能需要供應商前綴。

來源

2014-02-25 22:21:44

使用遊標屬性。

.simpleButton { cursor: pointer }

來源

2014-02-25 22:21:53

這很酷且簡單，但它仍然允許選擇'按鈕'文本，所以其他答案可能會更完整 – matanster

你想要的「默認」光標：

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;

來源

2014-02-25 22:23:37

CSS'按鈕'不必要地允許文本選擇

回答

相關問題