html,网页自定义button外形

Posted 2023-04-26

是这样的，通过<a >让js提交表单在IE6下会出现问题，所以我现在想用type="button" onclick=""来通过JS提交连接。我现在想设定button按钮的外观，请给出CSS样式，以及鼠标放在button上改变样式，用hover好像浏览器不兼容，onmouseover onmouseout那怎么改变button的border。。。具体要求给个例子吧，比如一开始button是这样的，鼠标放上去后button是这样的，button的border颜色有改变哦。给出的方式要浏览器兼容哦。不要让我用图片按钮哦，图片按钮载入时太慢哦。

表单元素（input,textarea,select,button等）都是可以自定义样式的。和普通的html标签一样，给他相应的class或id名称即可。

对于按钮类的美化，首先，你应该取出其border属性（假设你需要使用背景图片的画）。如：border:none;否则的话，你的按钮会像一个凸起的方块。

然后，你还需要给你的按钮一个块属性display:block;如果，同一行内有多个按钮，则给一个display:inline-block属性，然后设置其宽度、高度。

里面可以使用文字，也可以使用图片（background写入即可）。

如果使用图片，那么你可能需要把里面的文字隐藏，这就是display的作用。隐藏文字的写法通常是：text-indent:-300px;文字向左缩进，font-size:0px;字号缩小，overflow:hidden;超出隐藏。

聚焦效果，则可以使用js或jq的事件绑定来修正，如js：
onMouseover="this.className='hover'" 鼠标划过的时候给一个hover的名称
onMouseout="this.className=''"; 鼠标滑出的时候移除刚才添加的名称
css则对应起来：
#my_button button
#my_button button.hover,#my_button button:hover 参考技术A .btn-comment 
    padding: 3px 5px;
    background: #13ACF8;  
    color: #fff;
    border: 3px solid #6CD6FF;
    font-weight: bold;
    font-family: "微软雅黑", "Microsoft Yahei", "黑体", sans-serif;

不支持hover属性的IE6的话...为了互联网的未来 还是不要去支持IE6了

如果一定要支持的话 就用jquery吧，如下↓

$('.btn-comment').hover(function()  $(this).addClass('.active'););

这样的话 就将上面css中的

.btn-comment:hover

改为↓

.btn-comment.active

即可

参考技术B 不会啊，这按钮用的图片才多大点儿，肯定不会明显影响打开速度啊。 直接给这个按钮设置图片背景就好啊。 最好用#id 来设置样式。 js里面，用document.getElementById('id').style.background来控制背景。 参考技术C 按钮样子用背景图片来做，默认图片样式a,鼠标滑过图片样式b，input里加上下面这些
class="a" onmouseover="this.className='a'" onmouseout="this.className='b'" 参考技术D 你用 input button的话 hover 在IE6下 是不可以，没有伪类，但是IE6下有a:hover 所以建议你用a 来做按钮 href 或者onclick都可以 你可以看看css的bootstrap框架，应该都兼容，很多按钮的样式 引用外部css和js之后 只需要一个class即可 很方便

如何忽略 VueJS 中的自定义 html 标签？

【中文标题】如何忽略 VueJS 中的自定义 html 标签？

【英文标题】：How to ignore custom html tag in VueJS?

【发布时间】：2016-03-06 09:34:11

【问题描述】：

这是我的 vue 组件的 javascript 源代码

export default Vue.extend(
    template: `<fb:login-button ... ></fb:login-button>`
);

Vue 在控制台中显示以下警告

[Vue 警告]：未知的自定义元素：- 您是否正确注册了组件？

我想知道如何忽略vue js中的fb-login-button标签？

或者我该怎么做？

【问题讨论】：

您必须使用<fb:login-button …> 元素/语法吗？它的 HTML5 兼容版本只使用 <div class="fb-login-button" …> - 由于这是标准 HTML 元素而不是自定义元素，我想它不会首先触发该警告。

也在此处寻找答案，特别是针对A-Frame 组件。想法？

【参考方案1】：

如果你使用的是 Vue 2.0 版本，你可以使用 config 的ignoreElements

Vue.config.ignoredElements = ['menuitem']

已经在 Vue 2.0 中实现，将在 Vue 1.1 中实现

资源：vuejs issues 3090: Ignore some custom HTML components

【讨论】：

相信你也可以在元素上使用v-pre。

我可能会建议将名称推送到现有数组中。我倾向于从同一个文件中创建、注册和排除。通过推送到现有数组，您可以避免覆盖其他人的更改。