CSS基础-18-表单示例

1. 输入框 input

1.1 简易输入框

 
 





  搜索
  

• 效果

  
  
  image.png

1.2 可用属性选择器

• 选取文本输入框

input[type=text]

• 选择密码的输入框

input[type=password] 

• 选择数字的输入框

input[type=number] 

1.2 设置边框

说明

• box-sizing: border-box表示：
  元素的完整高度/宽度 = 定义的高度/宽度(width) + 内边距(padding) + 边框(border)

• 效果

  
  
  image.png

1.4 聚焦变化

• 示例 聚焦填色

input[type=text]:focus {
  background-color: lightblue;
}

• 效果

  
  
  image.png

• 示例 聚焦变边框

input[type=text]:focus {
  border: 3px solid #555;
}

1.5 搜索框加图片

 
 




搜索:


  

• 效果

  
  
  image.png

2. 文本框示例

 
 


    

提示: 随便写一些内容

  一些文本...

• 效果
  [图片上传失败...(image-1f9a8f-1656431771346)]

3. 下拉菜单示例

 
 




选择武将


  
  关羽
  张飞
  赵云
  

• 效果

  
  
  image.png

4. 按钮示例

 
 




按钮样式

• 效果

  
  
  image.png

5. 表单综合示例

5.1 示例 1

响应式表单


  

  

    

      First Name
    
    

      
    
  
  

    

      Last Name
    
    

      
    
  
  

    

      Country
    
    

      
        Australia
        Canada
        USA
      
    
  
  

    

      Subject
    
    

      
    
  
  

    
  
  

• 效果

  
  
  image.png

5.2 示例2

 
 




使用 CSS 来渲染 HTML 的表单元素


  

    First Name
    

    Last Name
    

    Country
    
      Australia
      Canada
      USA
    
  
    
  

• 效果

  
  
  image.png