前端input输入时边框颜色更改

1. 当聚焦与input框需要输入的时候,需要特定的边框颜色

input:focus {
  outline: 1px solid var(--primary50);  //设置边框颜色
  border-radius: 4px;
}

2.翻页时的el-pagination的翻页按钮的颜色更改

<style lang="less">  #因为我所有页面的按钮都需要这个样式,我就没有加scoped
.el-pagination.is-background .el-pager li.active {
    background-color: var(--primary100);
    color: #fff;
    cursor: default;
}
.el-pagination.is-background .el-pager li:hover {
    color: var(--white);
    background-color: var(--primary100);
}
.el-pagination.is-background .el-pager li.is-active {
    background-color: var(--primary100);
    color: #fff;
}

</style>

3.el-menu背景样式更改(原始图,选择图,悬浮图)

<style lang="less">  #因为我是所有页面都需要,所以没有使用scoped
.el-menu--horizontal > .el-menu-item.is-active {
    border-bottom: 2px solid var(--primary100);
    color: var(--primary100) !important;
}
.el-menu-item.is-active {
    color: var(--primary100);
}

/* 覆盖默认的悬浮背景色和边框 */
.el-menu--horizontal .el-menu-item:not(.is-disabled):focus,
.el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
    background-color: var(--primary10); /* 修改悬浮时的背景色 */
    color: var(--primary100);
}
</style>

  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
在HBuilder中,可以使用HTML、CSS和JavaScript来创建表单。下面是一个简单的表单示例: ``` <form> <label for="name">姓名:</label> <input type="text" id="name" name="name"><br><br> <label for="email">电子邮件:</label> <input type="email" id="email" name="email"><br><br> <label for="password">密码:</label> <input type="password" id="password" name="password"><br><br> <label for="gender">性别:</label> <input type="radio" id="male" name="gender" value="male"> <label for="male">男</label> <input type="radio" id="female" name="gender" value="female"> <label for="female">女</label><br><br> <label for="country">国家:</label> <select id="country" name="country"> <option value="china">中国</option> <option value="usa">美国</option> <option value="uk">英国</option> </select><br><br> <label for="message">留言:</label> <textarea id="message" name="message"></textarea><br><br> <input type="submit" value="提交"> </form> ``` 上面的代码创建了一个表单,包含了姓名、电子邮件、密码、性别、国家和留言等字段。其中,`<label>` 标签用于描述输入框的作用,`<input>` 标签用于创建输入框,`<select>` 标签用于创建下拉列表,`<textarea>` 标签用于创建多行文本输入框,`<input type="submit">` 标签用于创建提交按钮。 你可以使用CSS来美化表单的样式,例如修改输入框的颜色、字体、边框等。你也可以使用JavaScript来对表单进行验证和提交操作。 在HBuilder中,你可以通过拖拽组件快速创建表单,也可以手动编写HTML代码来创建表单。希望这些信息能够帮助到你!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值