Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

sync translation of 'build custom form controls' #14568

Merged
merged 10 commits into from
Jul 29, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
---
title: Example 1
title: 示例 1
slug: Learn/Forms/How_to_build_custom_form_controls/Example_1
---

这是第一个[如果构建自定义表单小部件](/zh-CN/docs/Web/Guide/HTML/Forms/How_to_build_custom_form_widgets)的代码解释事例。
这是第一个[如何构建自定义表单控件](/zh-CN/docs/Learn/Forms/How_to_build_custom_form_controls)的代码解释事例。

## 基本状态

Expand All @@ -25,9 +25,9 @@ slug: Learn/Forms/How_to_build_custom_form_controls/Example_1
### CSS

```css
/* --------------- */
/* Required Styles */
/* --------------- */
/*--------- */
/* 所需的样式 */
/* -------- */

.select {
position: relative;
Expand All @@ -51,15 +51,14 @@ slug: Learn/Forms/How_to_build_custom_form_controls/Example_1
visibility: hidden;
}

/* ------------ */
/* Fancy Styles */
/* ------------ */
/* ------- */
/* 美化样式 */
/* ------- */

.select {
font-size: 0.625em; /* 10px */
font-family: Verdana, Arial, sans-serif;

-moz-box-sizing: border-box;
box-sizing: border-box;

padding: 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */
Expand All @@ -71,7 +70,6 @@ slug: Learn/Forms/How_to_build_custom_form_controls/Example_1
box-shadow: 0 0.1em 0.2em rgba(0, 0, 0, 0.45); /* 0 1px 2px */

background: #f0f0f0;
background: -webkit-linear-gradient(90deg, #e3e3e3, #fcfcfc 50%, #f0f0f0);
background: linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0);
}

Expand All @@ -85,7 +83,7 @@ slug: Learn/Forms/How_to_build_custom_form_controls/Example_1
vertical-align: top;
}

.select:after {
.select::after {
content: "▼";
position: absolute;
z-index: 1;
Expand All @@ -96,7 +94,6 @@ slug: Learn/Forms/How_to_build_custom_form_controls/Example_1

padding-top: 0.1em;

-moz-box-sizing: border-box;
box-sizing: border-box;

text-align: center;
Expand All @@ -122,7 +119,6 @@ slug: Learn/Forms/How_to_build_custom_form_controls/Example_1

box-shadow: 0 0.2em 0.4em rgba(0, 0, 0, 0.4);

-moz-box-sizing: border-box;
box-sizing: border-box;

min-width: 100%;
Expand All @@ -141,7 +137,7 @@ slug: Learn/Forms/How_to_build_custom_form_controls/Example_1
}
```

### 结果
### 基本状态结果

{{ EmbedLiveSample('基本状态', 120, 130) }}

Expand All @@ -165,9 +161,9 @@ slug: Learn/Forms/How_to_build_custom_form_controls/Example_1
### CSS

```css
/* --------------- */
/* Required Styles */
/* --------------- */
/*--------- */
/* 所需的样式 */
/* -------- */

.select {
position: relative;
Expand All @@ -191,15 +187,14 @@ slug: Learn/Forms/How_to_build_custom_form_controls/Example_1
visibility: hidden;
}

/* ------------ */
/* Fancy Styles */
/* ------------ */
/* ------- */
/* 美化样式 */
/* ------- */

.select {
font-size: 0.625em; /* 10px */
font-family: Verdana, Arial, sans-serif;

-moz-box-sizing: border-box;
box-sizing: border-box;

padding: 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */
Expand All @@ -211,7 +206,6 @@ slug: Learn/Forms/How_to_build_custom_form_controls/Example_1
box-shadow: 0 0.1em 0.2em rgba(0, 0, 0, 0.45); /* 0 1px 2px */

background: #f0f0f0;
background: -webkit-linear-gradient(90deg, #e3e3e3, #fcfcfc 50%, #f0f0f0);
background: linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0);
}

Expand All @@ -225,7 +219,7 @@ slug: Learn/Forms/How_to_build_custom_form_controls/Example_1
vertical-align: top;
}

.select:after {
.select::after {
content: "▼";
position: absolute;
z-index: 1;
Expand All @@ -236,7 +230,6 @@ slug: Learn/Forms/How_to_build_custom_form_controls/Example_1

padding-top: 0.1em;

-moz-box-sizing: border-box;
box-sizing: border-box;

text-align: center;
Expand All @@ -262,7 +255,6 @@ slug: Learn/Forms/How_to_build_custom_form_controls/Example_1

box-shadow: 0 0.2em 0.4em rgba(0, 0, 0, 0.4);

-moz-box-sizing: border-box;
box-sizing: border-box;

min-width: 100%;
Expand All @@ -281,7 +273,7 @@ slug: Learn/Forms/How_to_build_custom_form_controls/Example_1
}
```

### 结果
### 活动状态结果

{{ EmbedLiveSample('活动状态', 120, 130) }}

Expand All @@ -305,9 +297,9 @@ slug: Learn/Forms/How_to_build_custom_form_controls/Example_1
### CSS

```css
/* --------------- */
/* Required Styles */
/* --------------- */
/*--------- */
/* 所需的样式 */
/* -------- */

.select {
position: relative;
Expand All @@ -331,15 +323,14 @@ slug: Learn/Forms/How_to_build_custom_form_controls/Example_1
visibility: hidden;
}

/* ------------ */
/* Fancy Styles */
/* ------------ */
/* ------- */
/* 美化样式 */
/* ------- */

.select {
font-size: 0.625em; /* 10px */
font-family: Verdana, Arial, sans-serif;

-moz-box-sizing: border-box;
box-sizing: border-box;

padding: 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */
Expand All @@ -351,7 +342,6 @@ slug: Learn/Forms/How_to_build_custom_form_controls/Example_1
box-shadow: 0 0.1em 0.2em rgba(0, 0, 0, 0.45); /* 0 1px 2px */

background: #f0f0f0;
background: -webkit-linear-gradient(90deg, #e3e3e3, #fcfcfc 50%, #f0f0f0);
background: linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0);
}

Expand All @@ -365,7 +355,7 @@ slug: Learn/Forms/How_to_build_custom_form_controls/Example_1
vertical-align: top;
}

.select:after {
.select::after {
content: "▼";
position: absolute;
z-index: 1;
Expand All @@ -376,7 +366,6 @@ slug: Learn/Forms/How_to_build_custom_form_controls/Example_1

padding-top: 0.1em;

-moz-box-sizing: border-box;
box-sizing: border-box;

text-align: center;
Expand All @@ -402,7 +391,6 @@ slug: Learn/Forms/How_to_build_custom_form_controls/Example_1

box-shadow: 0 0.2em 0.4em rgba(0, 0, 0, 0.4);

-moz-box-sizing: border-box;
box-sizing: border-box;

min-width: 100%;
Expand All @@ -421,6 +409,6 @@ slug: Learn/Forms/How_to_build_custom_form_controls/Example_1
}
```

### 结果
### 展开状态结果

{{ EmbedLiveSample('展开状态', 120, 130) }}
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
---
title: Example 2
title: 示例 2
slug: Learn/Forms/How_to_build_custom_form_controls/Example_2
---

这是解释 [如何构建自定义表单小部件](/zh-CN/docs/HTML/Forms/How_to_build_custom_form_widgets)的第二个示例。
这是解释[如何构建自定义表单控件](/zh-CN/docs/Learn/Forms/How_to_build_custom_form_controls)的第二个示例。

## 使用 JS

Expand All @@ -29,7 +29,6 @@ slug: Learn/Forms/How_to_build_custom_form_controls/Example_2
<li class="option">Apple</li>
</ul>
</div>
<form></form>
</form>
```

Expand All @@ -44,9 +43,9 @@ slug: Learn/Forms/How_to_build_custom_form_controls/Example_2
overflow: hidden;
}

/* --------------- */
/* Required Styles */
/* --------------- */
/*--------- */
/* 所需的样式 */
/* -------- */

.select {
position: relative;
Expand All @@ -70,15 +69,14 @@ slug: Learn/Forms/How_to_build_custom_form_controls/Example_2
visibility: hidden;
}

/* ------------ */
/* Fancy Styles */
/* ------------ */
/* ------- */
/* 美化样式 */
/* ------- */

.select {
font-size: 0.625em; /* 10px */
font-family: Verdana, Arial, sans-serif;

-moz-box-sizing: border-box;
box-sizing: border-box;

padding: 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */
Expand All @@ -90,7 +88,6 @@ slug: Learn/Forms/How_to_build_custom_form_controls/Example_2
box-shadow: 0 0.1em 0.2em rgba(0, 0, 0, 0.45); /* 0 1px 2px */

background: #f0f0f0;
background: -webkit-linear-gradient(90deg, #e3e3e3, #fcfcfc 50%, #f0f0f0);
background: linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0);
}

Expand All @@ -104,7 +101,7 @@ slug: Learn/Forms/How_to_build_custom_form_controls/Example_2
vertical-align: top;
}

.select:after {
.select::after {
content: "▼";
position: absolute;
z-index: 1;
Expand All @@ -115,7 +112,6 @@ slug: Learn/Forms/How_to_build_custom_form_controls/Example_2

padding-top: 0.1em;

-moz-box-sizing: border-box;
box-sizing: border-box;

text-align: center;
Expand All @@ -141,7 +137,6 @@ slug: Learn/Forms/How_to_build_custom_form_controls/Example_2

box-shadow: 0 0.2em 0.4em rgba(0, 0, 0, 0.4);

-moz-box-sizing: border-box;
box-sizing: border-box;

min-width: 100%;
Expand All @@ -163,8 +158,8 @@ slug: Learn/Forms/How_to_build_custom_form_controls/Example_2
### JavaScript

```js
window.addEventListener("load", function () {
var form = document.querySelector("form");
window.addEventListener("load", () => {
const form = document.querySelector("form");

form.classList.remove("no-widget");
form.classList.add("widget");
Expand Down Expand Up @@ -199,7 +194,6 @@ window.addEventListener("load", function () {
<li class="option">Apple</li>
</ul>
</div>
<form></form>
</form>
```

Expand Down
Loading