CSS样式禁用按钮 [英] Style disabled button with CSS

问题描述

我正试图改变带有嵌入图片的按钮的样式，如下面的小提琴所示：

http://jsfiddle.net/krishnathota/xzBaZ/1/

在示例中没有

我试图：

2. 禁用按钮时更改按钮中的图像


3. 禁用悬停效果


4. 当您点击按钮中的图像并拖动时，图像可以单独看到;我想避免


5. 可以选择按钮上的文本。
   
   

   我试着在按钮[禁用] 。但有些效果无法禁用。如
   top：1px;位置：相对; 和图像。

   解决方案

   $ c>：disabled 伪元素。

   
   
   

   对于仅支持CSS2的浏览器/设备，可以使用 [disabled]

   
   
   

   与图片一样，请勿在按钮中放置图片。使用CSS background-image 与 background-position 和 background-repeat 。

   
   
   

   与选择问题一样：这里是指向特定问题的链接：

   
   
   

   CSS规则可禁用文本选择突出显示

   
   

   I'm trying to change the style of a button with an embedded image as seen in the following Fiddle:

   http://jsfiddle.net/krishnathota/xzBaZ/1/

   In the example there are no images, I'm afraid.

   I'm trying to:

   1. Change the background-color of the button when it is disabled
   2. Change the image in the button when it is disabled
   3. Disable the hover effect when disabled
   4. When you click on the image in the button and drag it, the image can be seen separately; I want to avoid that
   5. The text on the button can be selected. I want to avoid that, too.

   I tried doing in button[disabled]. But some effects could not be disabled. like top: 1px; position: relative; and image.

   解决方案

   For the disabled buttons you can use the :disabled pseudo-element. It works for all the elements.

   For browsers/devices supporting CSS2 only, you can use the [disabled] selector.

   As with the image, don't put an image in the button. Use CSS background-image with background-position and background-repeat. That way, the image dragging will not occur.

   As with the selection problem: here is a link to the specific question:

   CSS rule to disable text selection highlighting

   这篇关于CSS样式禁用按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！