Input标签的样式设置

叁歲伎倆 2023-09-29 17:17 11阅读 0赞

**目录**

在input插入iconfont

在input中使用精灵图

input复选框设置边框颜色

--------------------

### 在input插入iconfont ###

用背景图片，然后设置input框的left-padding，使得内容刚好被挤到图片后面

### 在input中使用精灵图 ###

使用div嵌套，利用背景图片定位到图片

<style>    
        .box{
            width:300px;
            height:48px;
        }
        .box div{
            width:44px;
            height:44px;
            vertical-align:middle;
            display:inline-block;
            background-image:url(精灵图路径);
            background-position: -284px -79px;/*选择在精灵图中的位置*/
        }
        input{
            outline:none;/*去除轮廓线*/
            border:0px;
            vertical-align:middle;
            
        }
    </style>
    
    <div class="box">
        <div></div>
        <input type="text" placeholder="请输入用户名">
    </div>

### input复选框设置边框颜色 ###

<style>
        input[type='checkbox']{
            cursor: pointer;
            position: relative;
           /* width: 16px;
            height: 16px; */
        }
        input[type='checkbox']::after{
            position: absolute;
            top:0;
            background-color: white;
            width: 16px;
            height: 16px;
            content:' ';/*这里有空格*/
            display: inline-block;
            text-align:center;
            border:1px solid red;
        }
        input[type='checkbox']::after{
            content:'√';
            font-size: 12px;
            font-weight: blod;
            color: red;
        }
    </style>
    <input type="checkbox">

发表评论取消回复

表情：

评论列表（有 0 条评论，11人围观）

还没有评论，来说两句吧...

相关阅读

相关 Input标签的样式设置

目录在input插入iconfont 在input中使用精灵图 input复选框设置边框颜色 -------------------- 在input插入iconf

叁歲伎倆/ 2023年09月29日 17:17/ 0 赞/ 12 阅读

相关 input file 设置样式去掉选择文件的样式

原有的input file 样式 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0c

痛定思痛。/ 2023年08月17日 16:22/ 0 赞/ 174 阅读

相关 input 的placeholder样式

当我们给部分 input 类型的设置 placeholder 属性的时候，有的时候需要修改其默认的样式。 input::-webkit-input-place

谁借莪１个温暖的怀抱￠/ 2023年07月18日 15:30/ 0 赞/ 30 阅读

相关 Input标签禁用与Css动态样式绑定

input标签存在一个disabled属性，可以用来禁用此标签，通常还可以对这个属性进行禁用后的样式修改 <input [disabled]="boolean">

古城微笑少年丶/ 2022年12月05日 00:49/ 0 赞/ 154 阅读

相关 CSS_css去掉input标签的默认样式，去除input点击样式

去掉input标签的默认样式，去除input点击样式 outline: none; input { background: none;

小咪咪/ 2022年11月11日 05:17/ 0 赞/ 281 阅读

相关设置input 中placeholder的样式

一、效果 ![在这里插入图片描述][70] 二、代码 <!DOCTYPE html> <html lang="en"> <head>

短命女/ 2022年05月09日 04:58/ 0 赞/ 304 阅读

相关隐藏"Input"标签默认样式

input { width: 400px; border: none; background-color: inherit;

秒速五厘米/ 2022年04月04日 07:38/ 0 赞/ 328 阅读

相关 input type=checkbox样式设置

效果 ![20190219143029963.jpg][] html代码 <div class="checkbox-item"> <input n

蔚落/ 2022年03月18日 04:56/ 0 赞/ 321 阅读

相关 input中placeholder的css样式设置

<template> <view> <input class="search" type="text" placeholder="请输入搜索内容" placeholder

刺骨的言语ヽ痛彻心扉/ 2022年01月31日 18:19/ 0 赞/ 337 阅读

相关 el-input系列（el-input、el-select等）palceholder 的样式设置

el-input系列所有带有palceholder的，修改palceholder的样式。。。。。为了避免样式污染，对placeholder先包一个父类 //谷

浅浅的花香味﹌/ 2021年07月24日 14:56/ 0 赞/ 846 阅读