The front end uses H5+CSS3 to implement custom form controls (I am a painter)

Why write this article? This is because it is inevitable to use form controls to write a page. Of course, when I use the most common text and button, I can basically use CSS directly to override the form controls. BUT!!!!! This default style is too powerful and super unsociable when I use checkboxes, checkboxes, number boxes, and file boxes (totally different from the whole style, what the hell!) And these styles vary from browser to browser, and have their own styles for different systems. Here are some of the input styles I encountered in the process of using part of the type. I have also checked some information, and this article will be updated from time to time

directory
- Custom text box input[type=”text”]
- You can customize single or multiple options
  - Input type = “radio”], input [type = “checkbox”]
  - The picture
  - The fonts icon
- Input [type=”file”]
- Input [type=”number”]

Custom text box input[type=”text”]

Ha ha, this is a very simple change, but I will summarize it: take a look at what text fields look like in different browsers.Chrome text box— Hover when there is no state, this is focus when the state, gradient blue box. Firefox text boxHover and Focus have similar states, both have blue borders, this one has no gradient The text box of IE— has always been a maverick goose, hover state is blue, focus state becomes a black box, IE10 and a small × is what ghost, I click my value value is not, is also smart to life.

But this is the easiest one, the first one is to get rid of that border, the second one is to get rid of the cross in Internet Explorer and then the HTML

<input type="text" value="This is a text box"  id="text"/>
Copy the code

css

#text{
  outline:none;
  border: 1px solid orange;  
 /* This will solve the problem */
/* This is arbitrary */
  height: 30px;
  line-height: 30px;
  width: 140px;
  padding: 0 5px;
  font-size: 18px;

}
#text::-ms-clear{display: none; }/ * this only applies to build well, if you want to compatible with Internet explorer 9, IE8 is to use an element position here, also someone says the textarea to replace text, is no better way to * /
Copy the code

All right, that’s about it.

The same is true for input[type=”password”]

You can customize single or multiple options

Input type = “radio”], input [type = “checkbox”]

This frame. Look at him as he really isA single box for Chrome— Grey

An option box for Firefox and IE– flat

There are two ways to optimize: one is to find an image and have the UI make a checkbox image with the same style as the page. Another is the use of font ICONS, easy to use. Their HTML format is constant — use label+input to customize styles

The picture

Let’s start with the HTML code

<! -- Label represents the entire radio field, input is required, but it is hidden, the I element is used to replace the image of the form, and span is used to write the corresponding text -->
<label>
     <input type="radio" name="haha" value="haha"/>
     <i></i>
     <span>haha</span>
</label>
<label>
     <input type="radio" name="haha" value="hehe"/>
     <i></i>
     <span>hehe</span>
</label>
Copy the code

Then go to the CSS code

/* I put a 32px × 32px icon from Alibaba in the same directory */
/* Hide the original checkbox */
input[type="radio"]{
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    display: none;
}

label{
     display: inline-block;
     cursor: pointer;
}

/* Replace the icon */
label input[type="radio"]+i{
     width: 32px;
     height: 32px;
     display: block;
     background: url("./radio.png") no-repeat;
     float: left;
}

/* Replace the icon */ when selected
label input[type="radio"]:checked+i{
     background: url("./radio-active.png") no-repeat;
}

/* * * */
label input[type="radio"]~span{
    display: block;
    line-height: 32px;
    height: 32px;
    float: left;
    font-family: 'Microsoft Yahei';
}

/* Select */
label input[type="radio"]:checked~span{
     color: #38d6ff;
}
Copy the code

Take a look at the effect below:

The fonts icon

Add the font icon of “awesome” to the I tag

<label>
      <input type="radio" name="haha" value="haha"/>
      <i class="fa fa-circle-o"></i>
      <span>haha</span>
</label>
<label>
       <input type="radio" name="haha" value="hehe"/>
       <i class="fa fa-circle-o"></i>
       <span>hehe</span>
</label>
Copy the code

CSS has changed slightly

input[type="radio"]{
     appearance: none;
     -webkit-appearance: none;
     outline: none;
     display: none;
}

label{
     display: inline-block;
     cursor: pointer;
}

label input[type="radio"]+i{
      width: 32px;
      height: 32px;
      display: block;
      float: left;
      text-align: center; /* Font icon is vertically and horizontally centered */
      line-height: 32px;
      font-size:18px;  /* Font icon size is controlled by font size */
}

label input[type="radio"]~span{
     display: block;
     line-height: 32px;
     height: 32px;
     float: left;
     font-family: 'Microsoft Yahei';
}
Copy the code

Font ICONS require some jquery code

$("i").click(function(){
    // If it is not selected
     if($(this).is(".fa-circle-o") = =true) {// The current font color changes, the following font changes
           $(this).css("color"."#38d6ff").removeClass("fa-circle-o").addClass("fa-dot-circle-o").next().css("color"."#38d6ff");
     }else{
           // The selected case
           $(this).css("color"."# 000").removeClass("fa-dot-circle-o").addClass("fa-circle-o").next().css("color"."# 000"); }})Copy the code

The renderings are as follows

Input [type=”file”]

What did the file box look like?Chrome file box Firefox file box(Mouse up)And here’s the weird oneThe default file box of IE(This is also the mouse hover state, I will not a different version of the cut, cut on next year)

Hurry the painter’s project open ~~~~

Let’s look at the HTML structure first

<! -- File input, need to be hidden -->
<input type="file" id="myFile" class="myFile"/>
<! -- the actual display of the button -->
<div class="clickMe"></div>
<! -- Actually display the selected file name -->
<span class="textShow"></span>
Copy the code

And then we need to look at how do we style these two elements

/* Input file style, hide */
.myFile{
    width:0;
    height:0;
    display:none;
}
/* Button style, according to their own needs */
.clickMe{
    width: 105px;
    height: 30px;
    line-height: 30px;
    color: #fff;
    background-color: #00c8ff;
    text-align: center;
    cursor: pointer;
    float: left;
    margin-right: 10px;
}
/* Select the style of the text name */
.textShow{
    width: 100px;
    height: 30px;
    line-height: 30px;
}
Copy the code

Below is js code, using jquery remember to reference the time to download jquery oh ~

// Bind the click event to the button
$('.clickMe').off("click").on("click".function(){
        // When the file is selected, the change event is triggered
        $("#myFile").off('change').on('change'.function(){
            // Get an absolute path, not a real path, just a virtual path
            var fileFullName = $(this).val();
            console.log(fileFullName);
            // Get the file name (regular expression)
            var strFileName = fileFullName.replace(/ ^. +? (\ \ [^ \ \] +?) (\ [^ \. \ \] *?) ? $/gi."$1");
            console.log(strFileName);
            // Get the suffix name (regular expression)
            var fileExt = fileFullName.replace(+ \. /. /."");
            console.log(fileExt);
            // Fill the text box with the full name
            var realFileName = strFileName + "."+fileExt;
            $(".textShow").text(realFileName);
        })
        // Trigger the input click event
        $(".myFile").click();
    })
Copy the code

There are many ways to get the name of a file, just using regular expressions.

Let’s see what a custom file box looks like.

I’ll summarize some of the file form controls after that. Or with this theme to ~, such a file form control style is completed.

Input [type=”number”]

Look at the default boxFirefox’s default boxThe default box of Internet Explorer is no different from the text box

In fact, the main function of this is counting, some shopping websites will use more, the following to big change: first look at the structure of HTML

<! Remember to clear the float outside, any method can be used -->
<div class="clearfix">
       <! This is the number box -->
       <input type="number" name="number" value="1" class="f_l" id="number" />
       <! -- This is the up and down button -->
       <div class="f_l">
             <i class="add" id="add">+</i>
             <i class="subtract" id="subtract">-</i>
      </div>
</div>
Copy the code

Then CSS adds styles

/* Clear float */
.clearfix::before..clearfix::after{
     content:"";
     height: 0;
     line-height: 0;
     display: block;
     visibility: none;
     clear: both;
}

.clearfix {
     *zoom: 1;
}

/ * * / float
.f_l{
     float:left;
}

/* Custom number box configuration */
input[type="number"]{
     width: 36px;
     height: 36px;
     border: 2px solid skyblue;
     border-radius: 4px 0 0 4px;  /* Top left and bottom left radians */
     color: #137ac6;
     font-size: 20px;
     padding: 0 10px;
     border-right: none;
     outline: none; /* Remove the outer border */
     -moz-appearance:textfield;/* Remove the top and bottom signs */ from firefox
}

/* Remove */ from the plus and minus signs next to the number box
input[type="number"]::-webkit-inner-spin-button{
      -webkit-appearance: none;
}

input[type="number"]+div{
     cursor: pointer;
}

/* Common style for buttons */
input[type="number"]+div i{
     display: block;
     width: 28px;
     height: 17px;
     background-color: #137ac6;
     font-style: normal;
     line-height: 17px;
     text-align: center;
     font-size: 18px;
     color: #fff;
     border: 2px solid skyblue;
}

/* Special style of plus key with radian */ in upper right corner
input[type="number"]+div > .add{
     border-bottom: none;
     border-radius: 0 4px 0 0;
}

/* Special style of the minus key, radian */ in the lower right corner
input[type="number"]+div > .subtract{
     border-radius: 0 0 4px 0;
}
Copy the code

Then you need to bind events to two divs, one adding and one subtracting numbers that can’t exceed 0

// Bind events to the plus button
$("#add").on("click".function(){
    var add = $("#number").val();
    add++;
    $("#number").val(add);
})

// Bind events to the minus button
$("#subtract").on("click".function(){
    var subtract = $("#number").val();
    if(subtract > 0){
         subtract--;
    }
    $("#number").val(subtract);
})
Copy the code

Then use a picture to see how it looks:

Well, we’ll sum up the rest when we meet. That’s all !

The front end uses H5+CSS3 to implement custom form controls (I am a painter)

Custom text box input[type=”text”]

You can customize single or multiple options

Input type = “radio”], input [type = “checkbox”]

The picture

The fonts icon

Input [type=”file”]

Input [type=”number”]

Related Posts

Canvas base 2

Build vUE project through code cloud Gitee

Browser working principle (four) : page circulation system