Create an input box featuring elongated lines

I'm currently working on coding an input box that resembles the design shown in the image below.

https://i.sstatic.net/Wrpo0.png

However, I've encountered an issue where only part of the lines are showing up with my current code. Interestingly, everything works perfectly when it's styled as a button instead of an editable field.

.sidebar-search input {
    display: inline-block;
    border-color: #ffd717 -moz-use-text-color #ffd717 #ffd717;
    border-style: solid none solid solid;
    border-width: 2px 0 2px 0px;
    color: #ffd717;
    padding: 15px 25px;
    position: relative;
    overflow: hidden;
}

.sidebar-search input::before,
.sidebar-search input::after {
    content: '';
    width: 2px;
    height: 160%;
    position: absolute;
    top: -30%;
    background-color: #FFD717;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    z-index: 9999;
}

.sidebar-search input::before {
    left: 10%;
}

.sidebar-search input::after {
    right: 10%;
}
<div class="right-sidebar-area">
  <div class="single-right-sidebar">
    <div class="sidebar-search">
      <input type="text" name="Search">
    </div>
  </div>
</div>

htmlcss

Answer №1

You're almost there. It seems like the ::before and ::after pseudo-selectors won't work with input elements, so apply them directly to sidebar-search and enhance the styles of that particular div

.sidebar-search {
  /*define positioning, height, and width */
  position: relative;
  height: 50px;
  width: 175px;
}

.sidebar-search input {
    display: inline-block;
    border-color: #ffd717 -moz-use-text-color #ffd717 #ffd717;
    border-style: solid none solid solid;
    border-width: 2px 0 2px 0px;
    color: #ffd717;
    padding: 15px 25px;
    position: relative;
    top: 5px;
    overflow: hidden;
}

.sidebar-search::before,
.sidebar-search::after {
    content: '';
    width: 2px;
    height: 160%;
    position: absolute;
    top: -30%;
    background-color: #FFD717;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    z-index: 9999;
}

.sidebar-search::before {
    left: 10px; /*fine-tune these values for accuracy based on design */
}

.sidebar-search::after {
    right: 10px; /*fine-tune these values for accuracy based on design */
}
<div class="right-sidebar-area">
  <div class="single-right-sidebar">
    <div class="sidebar-search">
      <input type="text" name="Search">
    </div>
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The console is displaying the array, but it is not being rendered in HTML format in AngularJS

Can you please review my App.js file and let me know if there are any mistakes? I have provided the necessary files index.html and founditemtemplate.html below. Although it is returning an array of objects in the console, it is not displaying them as inten ...

javascripthtmlangularjs

Getting the present location on Google Maps for the web: A step-by-step guide

As a newcomer to this API, I have successfully generated an API key but am unsure of how to implement Google Maps. Despite my extensive research, I have been unable to find a solution that works for me. I am seeking assistance in locating users or devices ...

javascriptcssangularjsgoogle-maps

The alignment of my Navbar Brand is off in my Navigation Bar and won't align to

<body> <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <div class="container-fluid"> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs ...

htmlcss

Switching Bootstrap Navbar Active State with JavaScript

I have encountered an issue with using the "active" class on my navbar navigation items in Bootstrap 4. When I click on the links, the active state does not switch as intended. I have tried incorporating JavaScript solutions from similar questions but have ...

javascripthtmlcsstwitter-bootstrap

Conceal specific pages within the DataTable without deleting them

Currently, I am facing an issue where the dataTable paginates and removes the DOM pages along with the data. My goal is to extract all the data from the dataTable and convert it to JSON without losing access to the DOM when pagination occurs. I want to m ...

javascriptjqueryhtmljsondatatables

I am interested in incorporating a vertical scrollbar into a gridview in ASP.NET

I've successfully bound data to a grid view in my ASP.NET application. I've implemented pagination, but instead of that, I'd like to incorporate a scroll bar to prevent lengthy paging. Below is the code for my grid view: <div class="box ...

c#htmlcssasp.net

How to eliminate a line break following an image tag in HTML

Before I display my image with an H3 tag, I didn't use any break statements. However, the two tags are appearing on separate lines when I view it in the browser. Is there a CSS trick I can use to solve this issue, or perhaps an easier tag attribute th ...

htmlcss

Issue with spacing between rows of inline-block elements and adjacent rows

Just to clarify, this is not a table. I used "row" as a placeholder term. My issue involves a set of inline-block elements with a gap below them when compared to another element on the page. This is different from the space between the inline elements the ...

htmlcss

Decreasing the gap between form controls such as textboxes and labels with Bootstrap

I am currently working on a .NET (C#) MVC web application and I have implemented a Bootstrap dropdown menu in my project. My main objectives are as follows: 1) I aim to minimize the space between a label and its corresponding text-box. Initially, I at ...

javascriptc#htmlcsstwitter-bootstrap

the styling gets disrupted by the addition of grid columns

Looking for help with aligning and spacing three sets of strings in a single line while maintaining grid columns intact, even when window size is reduced. Currently experiencing alignment issues like this: https://i.stack.imgur.com/iqlam.png Tried removi ...

htmlcssangular-bootstrap

Challenges arise when transferring data retrieved from a table into a bootstrap modal window

I have been attempting to transfer values from a table into a modal. Initially, I successfully displayed the <td> values in an alert when a button was clicked on a specific row. Now, I am aiming to take it a step further by having these <td> va ...

javascriptjqueryhtmlbootstrap-4

Is there a way to insert a button within a table that will allow me to easily insert new rows and columns?

<head> No content available at the moment. <!-- Here is my code --> <h1>Reserve Your Hall Form</h1> <form class="form-horizontal"> <table class="form-group table table-bordered table-hover"> ...

htmlasp.net-web-apiangular-ui-bootstrapbootstrap-4angular2-forms

Java Applet for capturing specific sections of a webpage to create a screenshot

Does anyone know of a way (applet or something else) to capture a screenshot of the content within a specific div on a webpage? I came across this Java code for capturing a screenshot of the entire screen: import java.awt.AWTException; import java.awt.Re ...

javajqueryhtmlwebapplet

Angularjs still facing the routing issue with the hashtag symbol '#' in the URL

I have recently made changes to my index.html file and updated $locationProvider in my app.js. After clicking on the button, I noticed that it correctly routes me to localhost:20498/register. However, when manually entering this URL, I still encounter a 4 ...

javascripthtml.netangularjsroutes

Leverage predefined JavaScript functions within an Angular template

I have been attempting to execute an eval function within my angular template in the following manner: <div *ngFor="..."> <div *ngIf="eval('...')"></div> </div> You understand what I'm trying to ...

javascripthtmlangular

The tooltip function is not functioning properly on Internet Explorer when the button is disabled

I have been utilizing a similar solution found at http://jsfiddle.net/cSSUA/209/ to add tooltips to disabled buttons. However, I am encountering an issue specifically in Internet Explorer (IE11). The workaround involves wrapping the button within a span: ...

javascriptjqueryhtmlcss

I'm having trouble inserting my object into the scene: THREE.Object3D.add: the item is not a valid instance of THREE.Object3D

Recently, I started using three.js. Initially, I utilized a JSON file for my 3D model but encountered issues when exporting it from Blender. To resolve this, I decided to switch to obj files. Although the new obj model is working fine, I am struggling with ...

javascripthtmlthree.jsobjloader

Picture not adapting correctly to various screen sizes

I'm looking to adjust the size of an image based on the user's browser window. Here is the code I have so far: .image { max-height: 15%; width: auto; } The image class is used in this section of my code: <ul> <li> <img c ...

htmlcss

The column count is not properly set by Bootstrap 4.3 card-deck

I am working with Bootstrap 4.3 and custom Bootstrap SCSS imports, attempting to configure my card-deck for a custom theme. However, I am facing an issue with the $card-columns-count, as it is not being set correctly to 3 columns (as shown in the screensho ...

csssassbootstrap-4

Is there a way to determine if the tab has been muted by the

Chrome enables users to easily mute tabs by right-clicking on them and selecting Mute Tab. I am curious about whether there is a method to detect when a user has muted the tab. In other words, I am interested in knowing if it's possible for a website ...

javascripthtmlgoogle-chrome