简体   繁体   English

我想在曲线内创建输入文本并提交框。 我尝试了一些CSS,但它不起作用

[英]I want to create input text and submit box right inside curve. I tried some css but its not working

I search but not received similar code;我搜索但没有收到类似的代码; I'm facing problems in making inside curve borders:我在制作内部曲线边界时遇到问题:

 input[type="text"] { border: none; background-color: #fff; padding: 10px 15px; border-radius: 5px; outline: none; } input[type="submit"] { border: 1px solid #9efffc; background-color: transparent; padding: 10px 15px; border-radius: 5px; outline: none; color: #9efffc; }
 <form action=""> <label for="">Join VistaVerse</label> <input type="text" name="" id="" placeholder="Email Address"> <input type="submit" value="SIGN UP"> </form>

It should look like this :应该是这样的

It's feasible using clip-path: path(…) , but unfortunately it requires to work with fixed sizes (no responsive).使用clip-path: path(…)是可行的,但不幸的是它需要使用固定大小(无响应)。

See the Illustrated Guide to the SVG path Syntax for how to produce the shape you want.有关如何生成所需形状的信息,请参阅SVG path语法图解指南 In this example we'll need an Arch and Lines.在这个例子中,我们需要一个 Arch 和 Lines。

Because a clipped element cannot have a border, we use a::before pseudo-element to cover up the inside of the button with a slightly smaller shape.因为被裁剪的元素不能有边框,所以我们使用::before伪元素来覆盖按钮的内部,形状略小。

See How to add border in my clip-path: polygon();请参阅如何在我的剪辑路径中添加边框:多边形(); CSS style for other possible techniques to outline a shape.其他可能的技术来勾勒形状的CSS 样式

Also provide some extra style for the focus state, to not exclude users with disabilities or keyboard fans.还为focus状态提供一些额外的样式,以不排除残障用户或键盘爱好者。

 fieldset { background: #212121; border: 0; padding: 1rem; width: fit-content; display: flex; gap: 15px; } fieldset > * { box-sizing: border-box; height: 50px; padding: 0 1rem; font: 1rem system-ui; } fieldset > *:focus { outline: none; } input { min-width: 300px; clip-path: path('M 300 0 A 25 30 0 0 0 300 50 L 0 50 L 0 0') } input:focus { background: cyan; color: #212121; } button { position: relative; width: 215px; margin-left: -25px; cursor: pointer; border: 0; color: #fff; background: currentColor; clip-path: path('M 25 0 A 25 30 0 0 0 25 50 L 185 50 L 215 25 L 185 0') } button:focus { color: cyan; } button span { position: absolute; z-index: 2; inset: 0; line-height: 50px; } button::before { content: ""; position: absolute; z-index: 1; pointer-events: none; display: block; inset: 0; background: #212121; clip-path: path('M 25 1 A 24 30 0 0 0 25 49 L 185 49 L 214 25 L 185 1 z') }
 <form> <fieldset> <input type="text" aria-label="insert your email" placeholder="Email Address"> <button type="submit"><span>Sign up</span></button> </fieldset> </form>

Add another element (you can put span) on the right side of the input box and the left side of the button set the background black, and give a radius from the left side.在输入框右侧添加另一个元素(可以放span),左侧按钮设置背景为黑色,并从左侧给定一个半径。 Adjust it accordingly.相应地调整它。 Hopefully it will solve your problem.希望它能解决你的问题。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 每次单击按钮时,我都想重定向到一个组件,我尝试了 Link、React 中的 Routes,但它不起作用 - Every time I click on a Button I want to redirect to a component I tried Link , Routes in React but its not working 计算三次贝塞尔曲线的弧长,曲线长度。 为什么不工作? - Calculate the arclength, curve length of a cubic bezier curve. Why is not working? Javascript和CSS导致文本框消失,我希望它保留 - Javascript and CSS cause a text box to go away, I want it to stay 我想清空2 Input-Type-Text的值(选中)(框) - I want to Empty the Value of 2 Input-Type-Text, On Checked (Box) 如何使用CSS或JS使某些文本输入在输入中显示帮助图标? - How can I use CSS or JS to make some text inputs display a help icon inside the input? 我只想在一些div内创建简单的菜单链接? - I just want to create simple menu links inside some divs? 我只希望在文本框中输入数字(我只希望使用输入ID或类) - I want only numeric in my text box (I want only work with input id or class) 我希望“提交”按钮检查用户输入并向用户显示“正确”或“错误” - I want the "submit" button to check users input and display "right" or "wrong" to the user 当我按下提交按钮时,我想在该部分内创建一个 div 或更多 - I want to create a div Or more inside the section when I press the submit button 在我的情况下,我想推送输入值并将其存储在本地存储 VUEX 的数组中。 我试过这个,但它不工作 - In my situation I want to push input value and store it in array in local storage VUEX. I've tried this but it's not working
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM