css：input button常用属性以及将button嵌入到input中

1、鼠标经过button变成小手

//css属性
cursor:pointer;

2、清除button默认边框

border: none;

3、清除input默认边框

 outline: 0;

4、设置input中的默认值以及更改其中的样式

//输入框中的默认值
<input type="text" placeholder="请输入XXX">
/* 修改palaceholder样式 */
::-webkit-input-placeholder {color: rgb(173, 123, 123);}

5、将按钮嵌入input中

遵循子绝父相的原则，相当于移动按钮

<template><div class="father"><input type="text" placeholder="请输入XXX"><button>按钮</button></div>
</template><script>
export default {name: 'yanshi',
}
</script><style scoped>
/* 遵循子绝父相的原则 */
.father{position: relative;
}
button{position: absolute;/* 具体位置视情况而定 */top: 3px;left: 5px;
}
</style>

效果图就不展示了更多的是自己尝试和练习，这里只提供思路。

//要悄悄拔尖，然后惊艳所有人喔~

css：input button常用属性以及将button嵌入到input中相关推荐

Web学习第三天——HTML中input标签常用属性、框架集、内嵌框架
第三天HTML中input标签常用属性.框架集.内嵌框架一.input标签常用属性表单数据提交特点: (一).文本框(text) (二).密码框(password) (三).单选按钮(radio) ...
CSS边框的常用属性看这里
CSS边框属性 1 CSS边框的常用属性 2 HTML标签的边距 1 CSS边框的常用属性 (1) border:边框粗细边框的样式边框颜色; 边框的样式有四种,分别是solid单实线 doubl ...
Input的常用属性
■type:input的类型 □text:文本输入框(明文输入) □password:文本输入框(密文输入) □radio:单选框 □checkbox:复选框 □button:按钮 □reset:重置 ...
css知识点笔记-常用属性
css知识点范围:常用属性删除线:text-decoration : line-through 下划线:text-decoration : underline 斜体:font-style : ita ...
【CSS】display常用属性
1 display常用属性值描述 block 设置元素为块级元素 inline 设置元素为行内元素 inline-block 行内块元素 none 在不删除元素的情况下隐藏或显示元素(不占空间) ...
element input组件常用属性用法
在vue项目中肯定会用到element组件库,里面的input组件的用法和常用属性如下: ** 1,type属性:用法跟原生输入框一样,例:type="text",type=&qu ...
button常用属性_web阶段常用单词明细表，你值得拥有
很多学习Java的同学都知道,Web阶段不是很好理解,不是说代码量大,而是里面有很多定义也会接触很多新的常用单词,所以小编在这里结合老学员给大家总结了一下常用的一些单词,供大家搜索使用第一天单词 ...
Android Button常用属性
private Button bt; bt.setEnabled(true); //设置按键可用,不可用显示灰色 bt.setClickable(true); //设置按键可点击 bt.setText ...
css--DIV+CSS布局、常用属性、盒模型、自定义字体、标签的分类及相互转换
目录一.DIV+CSS布局 1.1 布局时常用的属性 1.2 布局 - 上中下结构 1.3 布局 - 上中下 - 左右 1.4 圣杯布局和双飞翼布局二.字体属性 2.1 字体颜色 2.2 字体大 ...

css：input button常用属性以及将button嵌入到input中

1、鼠标经过button变成小手

2、清除button默认边框

3、清除input默认边框

4、设置input中的默认值以及更改其中的样式

5、将按钮嵌入input中

css：input button常用属性以及将button嵌入到input中相关推荐

最新文章

热门文章