CSS basic learning--24 forms

1. A form case, we use CSS to render HTML form elements

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>CSS基础学习-表单</title> 
</head>
<style>
input[type=text], select {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

input[type=submit] {
  width: 100%;
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #45a049;
}

div {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}
</style>
<body>

<h3>使用 CSS 来渲染 HTML 的表单元素</h3>

<div>
  <form action="/action_page.php">
    <label for="fname">First Name</label>
    <input type="text" id="fname" name="firstname" placeholder="Your name..">

    <label for="lname">Last Name</label>
    <input type="text" id="lname" name="lastname" placeholder="Your last name..">

    <label for="country">Country</label>
    <select id="country" name="country">
      <option value="australia">Australia</option>
      <option value="canada">Canada</option>
      <option value="usa">USA</option>
    </select>
  
    <input type="submit" value="Submit">
  </form>
</div>

</body>
</html>

2. Input box (input) style

Use the width attribute to set the width of the input box

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>CSS基础学习-输入框样式</title> 
<style> 
input {
  width: 100%;
}
</style>
</head>
<body>

<p>全宽输入框:</p>

<form>
  <label for="fname">First Name</label>
  <input type="text" id="fname" name="fname">
</form>

</body>
</html>

In the above example, the width of all <input> elements is set to 100%. If you only want to set the specified type of input box, you can use the following attribute selector:

input[type=text] - Select text input box
input[type=password] - Select the input box for the password
input[type=number] - Select the input box for the number

3. Input box filling

3.1. Use the padding attribute to add padding to the input box

input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
}

Note: We set box-sizing the property to border-box. This ensures that the browser renders the input box with the specified width and height taking the border and padding into account.

3.2. Use border attributes to modify the size or color of the input border, and use border-radius attributes to add rounded corners to the input

input[type=text] {
  border: 2px solid red;
  border-radius: 4px;
}

3.3. If you only want to add a bottom border, you can use border-bottom attributes

input[type=text] {
  border: none;
  border-bottom: 2px solid red;
}

3.4. You can use background-color attributes to set the background color of the input box, and color attributes are used to modify the text color

input[type=text] {
  background-color: #3CBC8D;
  color: white;
}

Fourth, the input box (input) focus

By default, some browsers have a blue outline when the input field gets focus (click on the input field). We can set the input style to outline: none; ignore this effect.

Use :focus the selector to set the style of the input box when it gets focus

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>CSS基础学习-输入框聚焦</title> 
<style> 
input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  border: 1px solid #555;
  outline: none;
}

input[type=text]:focus {
  background-color: lightblue;
}
</style>
</head>
<body>

<p>在这个实例中，我们使用了 :focus 选择器（点击输入框时）来给文本输入框添加背景颜色:</p>

<form>
  <label for="fname">First Name</label>
  <input type="text" id="fname" name="fname" value="John">
  <label for="lname">Last Name</label>
  <input type="text" id="lname" name="lname" value="Doe">
</form>

</body>
</html>

When the text box gets the focus, set the color of the border:

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

Five, the input box (input) icon

If you want to add an icon to the input box, you can use background-image the attribute and the attribute for positioning background-position . Pay attention to setting the left margin of the icon, so that the icon has a certain space

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>CSS基础学习-输入框添加搜索图标</title> 
<style> 
input[type=text] {
  width: 100%;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  background-color: white;
  background-image: url('https://static.runoob.com/images/mix/searchicon.png');
  background-position: 10px 10px; 
  background-repeat: no-repeat;
  padding: 12px 20px 12px 40px;
}
</style>
</head>
<body>

<p>输入框按钮:</p>

<form>
  <input type="text" name="search" placeholder="搜索..">
</form>

</body>
</html>

Animated search box:

input[type=text] {
  -webkit-transition: width 0.4s ease-in-out;
  transition: width 0.4s ease-in-out;
}
 
input[type=text]:focus {
  width: 100%;
}

Before starting input port focus:

After starting input port focus:

Six, the text box (textarea) style

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>CSS基础学习-多行输入框</title> 
<style> 
textarea {
  width: 100%;
  height: 150px;
  padding: 12px 20px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  background-color: #f8f8f8;
  font-size: 16px;
  resize: none;
}
</style>
</head>
<body>

<p><strong>提示:</strong> 使用 resize 属性来禁用文本框可以重置大小的功能（一般拖动右下脚可以重置大小）。</p>

<form>
  <textarea>一些文本...</textarea>
</form>

</body>
</html>

Note: Use resize the attribute to disable the function of resizing the text box (generally drag the lower right corner to reset the size).

Seven, drop-down menu (select) style

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>CSS基础学习-下拉菜单</title> 
<style> 
select {
  width: 100%;
  padding: 16px 20px;
  border: none;
  border-radius: 4px;
  background-color: #f1f1f1;
}
</style>
</head>
<body>

<p>下拉菜单</p>

<form>
  <select id="country" name="country">
  <option value="au">Australia</option>
  <option value="ca">Canada</option>
  <option value="usa">USA</option>
  </select>
</form>

</body>
</html>

8. Button style

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>CSS基础学习-按钮样式</title> 
<style> 
input[type=button], input[type=submit], input[type=reset] {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 16px 32px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
}
</style>
</head>
<body>

<p>按钮样式</p>

<input type="button" value="按钮">
<input type="reset" value="重置">
<input type="submit" value="提交">

</body>
</html>

Tip: Use width: 100% to set full width buttons

CSS basic learning--24 forms

1. A form case, we use CSS to render HTML form elements

Guess you like