我要求翻译的内容： 在输入框底部如何创建一个点。

huangapple
go评论56阅读模式
英文:

How do i Create A Dot at the end of input bottom border

问题

我想要通过在输入框末尾添加一个点来为其添加样式。与下面的图像相同

我要求翻译的内容： 在输入框底部如何创建一个点。

我尝试了为 :before 和 :after 添加一些样式，但是我无法弄清楚

.parent {
  max-width: 352px;
  width: 100%;
}

.children {
  display: flex;
  align-items: center;
  width: 100%;
  margin: 10px 0;
}

.line {
  width: 100%;
  height: 1px;
  background-color: red;
}

.the-dot {
  width: 1px;
  height: 1px;
  background-color: red;
  border-radius: 999px;
}

.children input {
  border: none;
  border-bottom: 1px solid;
  margin-right: 5px;
  flex-grow: 1;
}

<div class="parent">
  <div class="children">
    <input type="text" placeholder="Type something...">
    <div class="line"></div>
    <div class="the-dot"></div>
  </div>
</div>
英文:

I want to style an input by adding an dot at the end of it. Same As The Image Below

我要求翻译的内容： 在输入框底部如何创建一个点。

I've Tried To add some styling for :before :after but i couldn't figure it out

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.parent {
  max-width: 352px;
  width: 100%;
}

.children {
  display: flex;
  align-items: center;
  width: 100%;
  margin: 10px 0;
}

.line {
  width: 100%;
  height: 1px;
  background-color: red;
}

.the-dot {
  width: 1px;
  height: 1px;
  background-color: red;
  border-radius: 999px;
}

.children input {
  border: none;
  border-bottom: 1px solid;
  margin-right: 5px;
  flex-grow: 1;
}

<!-- language: lang-html -->

&lt;div class=&quot;parent&quot;&gt;
  &lt;div class=&quot;children&quot;&gt;
    &lt;input type=&quot;text&quot; placeholder=&quot;Type something...&quot;&gt;
    &lt;div class=&quot;line&quot;&gt;&lt;/div&gt;
    &lt;div class=&quot;the-dot&quot;&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

<!-- end snippet -->

答案1

得分: 1

你可能不需要使用 flex 容器进行设置，而是可以使用 position: relative 为点元素创建锚点，这在我的情况下将是一个伪元素。我的解决方案基于这个假设。

对于红点的放置，我们可以使用：

position: absolute;
right: 0;
bottom: 0;

这将把它放在右下角。
接下来，我使用以下方式使元素居中：

transform: translate(50%, 50%);

元素将放置在中间，考虑到元素的比例。然而，从视觉上看，输入的底线似乎有一个像素的偏移，我们可以手动调整点，从 bottom: 1px 开始。

bottom: 1px;

* {
  box-sizing: border-box;
}

.parent {
  max-width: 352px;
  width: 100%;
}

.input-with-dot {
  position: relative;
  width: 100%;
  margin: 10px 0;
}

.input-with-dot::after {
  content: " ";
  position: absolute;
  right: 0;
  /* 由于线条大小为1px的视觉调整 */
  bottom: 1px;
  transform: translate(50%, 50%);
  width: 10px;
  height: 10px;
  background-color: red;
  border-radius: 50%;
}

.input-with-dot input {
  width: 100%;
  border: none;
  border-bottom: 1px solid;
}

<div class="parent">
  <div class="input-with-dot">
    <input type="text" placeholder="Type something...">
  </div>
</div>
英文:

You probably don't need the setup with the flex-container, instead we can use position: relative to create an anchor for the dot-element, which in my case will be a pseudo-element. My solution is based on this assumption.

For the placement of the red dot, we can use:

position: absolute;
right: 0;
bottom: 0;

This will place it in the right-bottom corner.<br>
Next, I've centered the element using:

transform: translate(50%, 50%);

The element will be placed right in the middle taking the element proportions into account. However, visually, the bottom line of the input looks one pixel off, we can manually adjust the dot to start from bottom: 1px instead.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

* {
  box-sizing: border-box;
}

.parent {
  max-width: 352px;
  width: 100%;
}

.input-with-dot {
  position: relative;
  width: 100%;
  margin: 10px 0;
}

.input-with-dot::after {
  content: &quot; &quot;;
  position: absolute;
  right: 0;
  /* visual adjustment, because of the line-size of 1px */
  bottom: 1px;
  transform: translate(50%, 50%);
  width: 10px;
  height: 10px;
  background-color: red;
  border-radius: 50%;
}

.input-with-dot input {
  width: 100%;
  border: none;
  border-bottom: 1px solid;
}

<!-- language: lang-html -->

&lt;div class=&quot;parent&quot;&gt;
  &lt;div class=&quot;input-with-dot&quot;&gt;
    &lt;input type=&quot;text&quot; placeholder=&quot;Type something...&quot;&gt;
  &lt;/div&gt;
&lt;/div&gt;

<!-- end snippet -->

答案2

得分: 0

以下是您提供的代码的翻译部分：

.parent {
  max-width: 352px;
  width: 100%;
}

.line {
  width: 100%;
  height: 1px;
  background-color: black;
  margin-top: 15px;
  display: block;
}

.the-dot {
  width: 8px;
  height: 8px;
  background-color: red;
  border-radius: 50%;
  display: inline-block;
  float: right;
  margin-top: -4px;
}

input {
  width: 100%;
  display: block;
  border: none;
  border-bottom: 1px solid;
  outline: 0;
  border: 0;
}

<div class="parent">
    <input type="text" placeholder="Type something...">
    <div class="line"><div class="the-dot"></div></div>
</div>

请注意，上述内容只包括您提供的代码的翻译部分，不包括其他内容。

英文:

Without using flex and nesting the dot inside the line I ended up to this:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.parent {
  max-width: 352px;
  width: 100%;
}


.line{
  width: 100%;
  height: 1px;
  background-color: black;
  margin-top:15px;
  display:block;
}

.the-dot {
  width: 8px;
  height: 8px;
  background-color: red;
  border-radius: 50%;
  display:inline-block;
  float:right;
  margin-top:-4px;
  }

input {
  width:100%;
  display:block;
  border: none;
  border-bottom: 1px solid;
  outline:0;
  border:0;
}

<!-- language: lang-html -->

&lt;div class=&quot;parent&quot;&gt;
    &lt;input type=&quot;text&quot; placeholder=&quot;Type something...&quot;&gt;
    &lt;div class=&quot;line&quot;&gt;&lt;div class=&quot;the-dot&quot;&gt;&lt;/div&gt;&lt;/div&gt;
&lt;/div&gt;

<!-- end snippet -->

答案3

得分: 0

以下是您要翻译的内容：

只需使用position: absolute将使用border-radius和aspect-ratio创建的圆点定位：

.children {
  position: relative;
}

.the-dot {
  position: absolute;
  /* .children高度的100%，减去一半的大小，减去一半的线宽。 */
  top: calc(100% - var(--size) / 2 - var(--border) / 2);
  /* .children宽度的100%，减去一半的大小。 */
  left: calc(100% - var(--size) / 2);
  /* 使其变成圆形 */
  border-radius: 50%;
  height: var(--size);
  /* 确保其高度等于其宽度 */
  aspect-ratio: 1 / 1;
}

另外，您还可以使用伪元素：

.children::after {
  content: '';
  /* 同上 */
}

试一下：

<!-- begin snippet: js hide: true -->

<!-- language: lang-css -->
/* 调整这些值 */
:root {
  --size: 5px;
  --color: #f00;
  --border: 1px;
}

.children {
  position: relative;
}

.the-dot {
  position: absolute;
  top: calc(100% - var(--size) / 2 - var(--border) / 2);
  left: calc(100% - var(--size) / 2);
  border-radius: 50%;
  height: var(--size);
  aspect-ratio: 1 / 1;
  background: var(--color);
}

/* 仅演示用 */

.parent {
  max-width: 352px;
  width: 100%;
}

.children {
  display: flex;
  align-items: center;
  width: 100%;
  margin: 10px 0;
}

.children input {
  border: none;
  border-bottom: var(--border) solid;
  flex-grow: 1;
}

<!-- language: lang-html -->

<div class="parent">
  <div class="children">
    <input type="text" placeholder="Type something...">
    <div class="the-dot"></div>
  </div>
</div>

<!-- end snippet -->
英文:

Simply use position: absolute to position a dot created using border-radius and aspect-ratio:

.children {
  position: relative;
}

.the-dot {
  position: absolute;
  /* 100% of .children&#39;s height, minus half its size, minus half line width. */
  top: calc(100% - var(--size) / 2 - var(--border) / 2);
  /* 100% of .children&#39;s width, minus half its size. */
  left: calc(100% - var(--size) / 2);
  /* Make it round */
  border-radius: 50%;
  height: var(--size);
  /* Ensure that its height is equal to its width */
  aspect-ratio: 1 / 1;
}

Alternatively, you can use a pseudo-element:

.children::after {
  content: &#39;&#39;;
  /* idem */
}

Try it:

<!-- begin snippet: js hide: true -->

<!-- language: lang-css -->

/* Play with these */
:root {
  --size: 5px;
  --color: #f00;
  --border: 1px;
}

.children {
  position: relative;
}

.the-dot {
  position: absolute;
  top: calc(100% - var(--size) / 2 - var(--border) / 2);
  left: calc(100% - var(--size) / 2);
  border-radius: 50%;
  height: var(--size);
  aspect-ratio: 1 / 1;
  background: var(--color);
}


/* Demo only */

.parent {
  max-width: 352px;
  width: 100%;
}

.children {
  display: flex;
  align-items: center;
  width: 100%;
  margin: 10px 0;
}

.children input {
  border: none;
  border-bottom: var(--border) solid;
  flex-grow: 1;
}

<!-- language: lang-html -->

&lt;div class=&quot;parent&quot;&gt;
  &lt;div class=&quot;children&quot;&gt;
    &lt;input type=&quot;text&quot; placeholder=&quot;Type something...&quot;&gt;
    &lt;div class=&quot;the-dot&quot;&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

<!-- end snippet -->

答案4

得分: 0

以下是您提供的代码的中文翻译部分：

/* 一个简单的CSS重置，以确保浏览器使用
   相同的border-box大小算法，包括
   声明元素大小中的填充和边框，
   移除默认的边距和填充，并确保
   字体属性从祖先继承： */

*,
::before,
::after {
  box-sizing: border-box;
  font: inherit;
  margin: 0;
  padding: 0;
}

body {
  /* 指定<body>应占据视口的全部
     块轴上的尺寸： */
  block-size: 100vh;
  /* 页面的通用字体样式，根据您的喜好进行调整： */
  font-family: system-ui;
  font-size: 16px;
  font-weight: 400;
  /* 在块轴和内联轴上声明填充： */
  padding-block: 1rem;
  padding-inline: 1.5rem;
}

.halfSize {
  width: 50%;
}

label {
  /* 使用弹性布局： */
  display: flex;
  font-size: 1.5rem;
  /* 缩写形式：
       flex-direction: row;
       flex-wrap: wrap;
  */
  flex-flow: row wrap;
}

label > * {
  /* <label>元素的所有子元素将占据
     可用空间的100%： */
  flex-basis: 100%;
  /* 并在块轴和内联轴上具有填充： */
  padding-block: 0.25rem;
  padding-inline: 0.5rem;
}

input {
  /* 用于创建边框的各种细节的自定义属性；
     --borderColor是边框的颜色： */
  --borderColor: var(--borderColorStart);
  /* 这是默认的边框颜色，基于
     字体的颜色；这可以在CSS中的特定
     元素或HTML的“style”属性中进行更新，
     例如：
     <input style="--borderColor: lime">： */
  --borderColorStart: currentColor;
  /* 该属性默认为--borderColorStart
     值，但如果需要渐变，可以设置
     不同的值（可以在此处设置，
     或在特定元素的特定规则集中，
     或在HTML中设置）： */
  --borderColorEnd: var(--borderColorStart);
  /* 实际上充当“border-width”，设置
     水平渐变/线条的厚度： */
  --borderSize: 0.25rem;
  /* 期望的点的颜色： */
  --dotColor: red;
  /* 计算点应该放置在何处，
     以便位于右下角；可以轻松地
     调整计算以将其放置在任何其他
     位置： */
  --dotPosition: calc(100% - var(--dotRadius));
  /* 计算点的半径，以帮助
     其他计算： */
  --dotRadius: calc(var(--dotSize) / 2);
  /* 点应该的大小： */
  --dotSize: 1rem;
  /* 使用多个渐变作为背景图像来
     重现线和点： */
  background-image: radial-gradient(/* 这里使用径向渐变来绘制点，
         我们指定要使用的圆： */
  circle, /* 我们使用声明的--dotColor自定义属性，
         从0扩展到计算的半径： */
  var(--dotColor) 0 var(--dotRadius), /* 然后切换到透明（以允许
         背景颜色或其他背景图像显示
         而不裁剪），从--dotRadius
         大小延伸到渐变的完整大小： */
  transparent var(--dotRadius)), linear-gradient(/* 使用线性渐变来生成实心的“边框”,
         这是在90度位置，使其在水平方向上运行
         （0度是垂直方向）： */
  90deg, /* 我们从分配的--borderColorStart颜色值开始： */
  var(--borderColorStart), /* 并以--borderColorEnd的值结束，它默认
         为与--borderColorStart相同的声明颜色，
         用于创建平滑渐变： */
  var(--borderColorEnd));
  /* 设置图像的背景位置，第一个（径向渐变）
     位于100% 100%（右下角），第二个
     （线性渐变）位于零（左）和元素高度的100%
     减去--dotRadius的大小和--borderSize的一半，
     即--dotSize的一半和--borderSize的一半： */
  background-position: 100% 100%, 0 calc(100% - (var(--dotRadius) - var(--borderSize)/2));
  /* 防止重复背景： */
  background-repeat: no-repeat;
  /* 设置背景图像的大小，第一个（径向渐变）
     大小设置为--dotSize的两个轴（内联和块轴），
     而第二个（线性渐变）大小设置为全宽度（100%）
     减去--dotSize，高度设置为--borderSize： */
  background-size: var(--dotSize) var(--dotSize), calc(100% - var(--dotSize)) var(--borderSize);
  /* 移除默认元素边框： */
  border: 0 none transparent;
  /* 设置块轴末端的填充（块轴是默认的块元素布局轴，在英语中是垂直的），
     块轴末端位置是元素在块轴上的最后边缘；
     这个计算创建值，它是--dotSize的四分之三；
     这可以根据您的偏好进行调整： */
  padding-block-end: calc(var(--dotSize) * 

<details>
<summary>英文:</summary>

One approach is as below, with explanatory comments in the code; this approach has the &amp;ndash; arguable &amp;ndash; benefit of aiding accessibility with the use of a `&lt;label&gt;` element to wrap around the `&lt;input&gt;` and removing the presentational elements (the `.line` and `.dot` `&lt;div&gt;` elements):

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    /* a simple CSS reset, to ensure that browsers use the
       the same - border-box - sizing algorithm, to include
       padding and borders in the declared element sizes,
       removing default margin and padding and ensuring that
       font properties are inherited from ancestors: */

    *,
    ::before,
    ::after {
      box-sizing: border-box;
      font: inherit;
      margin: 0;
      padding: 0;
    }

    body {
      /* specifying that the &lt;body&gt; should take up the full
         size of the viewport on the block axis: */
      block-size: 100vh;
      /* generic font styles for the page, adjust to your preferences: */
      font-family: system-ui;
      font-size: 16px;
      font-weight: 400;
      /* declaring padding on the block, and inline, axes: */
      padding-block: 1rem;
      padding-inline: 1.5rem;
    }

    .halfSize {
      width: 50%;
    }

    label {
      /* using flex layout: */
      display: flex;
      font-size: 1.5rem;
      /* shorthand for:
           flex-direction: row;
           flex-wrap: wrap;
      */
      flex-flow: row wrap;
    }

    label &gt; * {
      /* all children of the &lt;label&gt; element will take
         100% of the available space: */
      flex-basis: 100%;
      /* and will have padding on their block, and inline,
         axes: */
      padding-block: 0.25rem;
      padding-inline: 0.5rem;
    }

    input {
      /* custom properties for the various details of the
         border we&#39;re creating;
         --borderColor is the colour of the border: */
      --borderColor: var(--borderColorStart);
      /* this is the default border-color, based on the
         color of the font; this can be updated in the CSS
         for specific elements or in the HTML &quot;style&quot;
         attribute, for example:
         &lt;input style=&quot;--borderColor: lime&quot;&gt;:
      */
      --borderColorStart: currentColor;
      /* this property defaults to the --borderColorStart
         value, but if a gradient is desired then you can
         set a different value (either here, or in specific
         rulesets for specific elements, or in the html as
         above): */
      --borderColorEnd: var(--borderColorStart);
      /* effectively acting as &#39;border-width&#39;, this sets the
         thickness of the horizontal gradient/line: */
      --borderSize: 0.25rem;
      /* the desired dot-color: */
      --dotColor: red;
      /* calculating where the dot should be positioned in
         order to be placed at the bottom right; the calculation
         could easily be adjusted to place it at any alternative
         position: */
      --dotPosition: calc(100% - var(--dotRadius));
      /* calculating the radius of the dot, in order to aid
         other calculations: */
      --dotRadius: calc(var(--dotSize) / 2);
      /* the size that the dot should be: */
      --dotSize: 1rem;
      /* using multiple gradients as background images to
         reproduce the line and dot: */
      background-image: radial-gradient(/* a radial gradient is used for the dot, here
             we specify a circle to be used: */
      circle, /* we use the declared --dotColor custom property,
             which extends from 0 to the calculated radius: */
      var(--dotColor) 0 var(--dotRadius), /* we then switch to transparent (to allow for the
             background-color or other background-images to
             show through without clipping) from the --dotRadius
             size extending to the full size of the gradient: */
      transparent var(--dotRadius)), linear-gradient(/* using a linear-gradient to generate the solid &#39;border&#39;,
             this is positioned at 90degrees so that it runs
             horizontally (0deg is vertical): */
      90deg, /* we start with the assigned --borderColorStart color value: */
      var(--borderColorStart), /* and end with the --borderColorEnd value, which defaults
             to the same declared color as --borderColorStart for a
             solid single line-colour, but can be overriden to create
             a smooth gradient: */
      var(--borderColorEnd));
      /* setting the background positions of the images, the first (radial-gradient)
         is positioned at 100% 100% (at the right bottom point), and the second
         (linear-gradient) is positioned at zero (left) and 100% of the
         element&#39;s height minus both the size of the --dotRadius and half of the
         --borderSize divided by 2, so half the --dotSize and half the --borderSize: */
      background-position: 100% 100%, 0 calc(100% - (var(--dotRadius) - var(--borderSize)/2));
      /* preventing repeating backgrounds: */
      background-repeat: no-repeat;
      /* setting the size of the background-images, the first (radial-gradient) is sized
         to be the declared --dotSize on both axes (inline and block), whereas the
         linear-gradient is sized to be full-width (100%) minus the --dotSize, and
         its height is the declared --borderSize: */
      background-size: var(--dotSize) var(--dotSize), calc(100% - var(--dotSize)) var(--borderSize);
      /* removing default element borders: */
      border: 0 none transparent;
      /* setting the padding on the block-end (the block-axis is the axis on which
         block-elements are laid out by default, vertical in the English language),
         the block-end position is the last edge of the element on the block-axis;
         this is - in English - equivalent to padding-bottom; there&#39;s a calculation
         to create the value, which is three-quarters of the --dotSize; this can -
         and perhaps should be - adjusted to your own preferences:: */
      padding-block-end: calc(var(--dotSize) * 0.75);
    }

&lt;!-- language: lang-html --&gt;

    &lt;div class=&quot;parent&quot;&gt;
      &lt;label&gt;
        &lt;span class=&quot;labelText&quot;&gt;Name&lt;/span&gt;
        &lt;input type=&quot;text&quot; placeholder=&quot;Type something...&quot;&gt;
      &lt;/label&gt;
    &lt;/div&gt;

    &lt;div class=&quot;parent halfSize&quot;&gt;
      &lt;label&gt;
        &lt;span class=&quot;labelText&quot;&gt;Name&lt;/span&gt;
        &lt;input type=&quot;text&quot; placeholder=&quot;Type something...&quot;&gt;
      &lt;/label&gt;
    &lt;/div&gt;

&lt;!-- end snippet --&gt;

[JS Fiddle demo](https://jsfiddle.net/davidThomas/p4rb9yao/).

As an aside, I&#39;m certain that this could be achieved using the `border-image` property but I &amp;ndash; personally &amp;ndash; cannot understand that property well enough to use it or know what I&#39;m doing with it; others may &amp;ndash; in time &amp;ndash; offer such a solution which I eagerly anticipate.

References:

* [`background`](https://developer.mozilla.org/en-US/docs/Web/CSS/background).
* [`background-image`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-image).
* [`background-position`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-position).
* [`background-repeat`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat).
* [`background-size`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-size).
* [`block-size`](https://developer.mozilla.org/en-US/docs/Web/CSS/block-size).
* [`border`](https://developer.mozilla.org/en-US/docs/Web/CSS/border).
* [`border-image`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-image).
* [`border-width`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-width).
* [`box-sizing`](https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing).
* [`calc()`](https://developer.mozilla.org/en-US/docs/Web/CSS/calc).
* [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*).
* [CSS logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties).
* [`display`](https://developer.mozilla.org/en-US/docs/Web/CSS/display).
* [`flex-basis`](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis).
* [`flex-direction`](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction).
* [`flex-flow`](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-flow).
* [`flex-wrap`](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap).
* [`font`](https://developer.mozilla.org/en-US/docs/Web/CSS/font).
* [`font-family`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-family).
* [`font-size`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size).
* [`font-weight`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight).
* [`linear-gradient()`](https://developer.mozilla.org/en-US/docs/web/css/gradient/linear-gradient).
* [`margin`](https://developer.mozilla.org/en-US/docs/Web/CSS/margin).
* [`padding`](https://developer.mozilla.org/en-US/docs/Web/CSS/padding).
* [`padding-block`](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-block).
* [`padding-block-end`](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-block-end).
* [`padding-inline`](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-inline).
* [`radial-gradient()`](https://developer.mozilla.org/en-US/docs/web/css/gradient/radial-gradient).

</details>

huangapple
  • 本文由 发表于 2023年5月7日 15:50:55
  • 转载请务必保留本文链接：https://go.coder-hub.com/76192754.html
  • css
  • forms
  • html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定