When you click a link, a:active style of the clicked link is being applied. So when I've got a link which gets called and activated from the url using its name like whats shown below, why doesn't my code work?
.box{
display:block;
width:100px;
height:100px;
background:gray;
margin:20px 0px;
}
a{
-moz-transition:all 1s ease;
-webkit-transition:all 1s ease;
}
a:active{
background:orange;
}
<body>
user
<a class="box" name="user">userbox</a>
</body>
I want it to call a:active css for userbox when userbox is called from the url.
Is my code invalid or not an option for these kind of situations?
I think the pseudo-class you want is :focus. :active is applied while a link is being clicked.
-EDIT-
Of the browsers I tested, only Internet Explorer 11 focused the anchor when the URL was updated to include #user. You can use JavaScript to set a class as follows:
window.addEventListener('hashchange', function () {
var activeElement = document.getElementById(window.location.hash.substring(1));
if (activeElement) {
activeElement.className = 'active';
}
});
This would require using the following CSS:
.active {
color: orange;
}
And this assumes using id="user" instead of name="user" which both behave the same with regard to the URL hash.
I want it to call a:active css for userbox when userbox is called from the url. my code is invalid or it's not an option for this kinda situations?
You can't. :active means "While being clicked on or otherwise activated". It does not mean "Having an href attribute that resolves to the current URI".
Use some other mechanism, such as adding a class to the element in the HTML.
We can hack it, we have the technology.
In all seriousness you should use classes and Javascript for this solution, but I put a bit too much of my lunch time into this to just throw it away.
http://jsfiddle.net/DF4VG/
CSS:
#label {
display: block;
}
#label:hover {
cursor: pointer;
text-decoration: underline;
}
#container {
position: relative;
}
#wrapper {
z-index: 2;
position: relative;
}
#user {
border: none;
background: transparent;
position: absolute;
top: 0;
bottom: 0;
width: 100%;
z-index: 1;
transition: all 1s ease;
}
#user:focus {
background: orange;
}
HTML:
<form action="">
<label id="label" for="user">User</label>
<div id="container">
<div id="wrapper">
<p>There is some content in here</p>
<p>And some more</p>
<p>And so forth</p>
</div>
<input type="text" id="user" value="" readonly>
</div>
</form>
Related
<!DOCTYPE html>
<html>
<head>
<style>
html,body{
height:100%;
width:100%;
margin:0%;
Padding:0%;
}
.wrap{
height:100%;
width:100%;
position:relative;
overflow:hidden;
background:#120103;
color:#fff;
text-align:center;
}
header{
background:#3E474F;
box-shadow:0 .5em 1em #111;
position:absolute;
z-index:900;
width:100%;
}
header label{
color:#788188;
cursor:pointer;
display:inline-block;
line-height:4.25em;
font-size:.667em;
font-weight:bold;
padding:0 1em;
}
header label:hover{
background:#2e353b;
}
.slide{
width:100%;
height:100%;
position:absolute;
top:0%;
left:100%;
z-index:10;
padding:8em 1em 0;
background-color:#120103;
background-position:50% 50%;
background-size:cover;
transition:left 0s .75s;
}
[id^= "slide"]:checked + .slide{
left:0;
z-index:100;
transition:left .65s ease-out;
}
img{
height:250px;
width:250px;
Margin:20px;
Overflow:none;
display:block;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #008CBA;
}
.slide-one:hover .overlay{
opacity:0.5;
}
.slide-two:hover .overlay{
opacity:0.5;
}
.slide-three:hover .overlay{
opacity:0.5;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.slide-one{
background-image:url('wow.jpg');
}
.slide-two{
background-image:url('Anonymous.jpg ');
}
.slide-three{
background-image:url('1.jpg');
}
</style>
</head>
<body>
<div class="wrap">
<header>
<label for="slide-1-trigger">Slide One</label>
<label for="slide-2-trigger">Slide Two</label>
<label for="slide-3-trigger">Slide Three</label>
</header>
<input id="slide-1-trigger" type="radio" name="slide" checked>
<section class="slide slide-one">
<div class="overlay">
<div class="text">Ethical Hacking is licensed hacking.... Read More
</div>
</div>
</section>
<input id="slide-2-trigger" type="radio" name="slide" >
<section class="slide slide-two" >
<div class='overlay'>
<div class="text">A rather famous group of hackers and tech savvys spread
across the world....Read More</div>
</div>
</section>
<input id="slide-3-trigger" type="radio" name="slide" >
<section class="slide slide-three" >
<div class='overlay'>
<div class="text">Just Checking</div>
</div>
</div>
</body>
</html>
Hello everybody , i was watching a video on making a CSS image slider after watching the whole video i wrote the above code but am having some problem understanding this particular piece of code:
[id^= "slide"]:checked + .slide{
left:0;
z-index:100;
transition:left .65s ease-out;
}
I need help understanding this part of the code. Thank you for help in advance :)
First off it seems you understand the fundamental principles of CSS but if I am wrong and you do not, I recommend the tutorials of MDN about How CSS works and the Syntax.
So piece by piece...
1. [id^= "slide"]:checked + .slide
This is the selector and consists of two major parts: [id^= "slide"]:checked and .slide, connected by a + sign. I assume that you know what .slide means on its own. If not, you should read the articles that I posted above.
1.1. +
The + operator with the x + y syntax selects all elements that would be selected by pure y but it limits the selection to only those elements directly following other elements which would be selected by x. So if you have .a + .b then you get all elements with the class b directly preceded by elements with the class a:
div {
border: 1px dashed black;
padding: 1em;
margin: 1em;
}
.wupwupwup + .nanana {
background: red;
}
This selects all .nanana directly after .wupwupwup.
<div class="nanana wupwupwup">This is not selected because there is no .wupwupwup before.</div>
<div class="wupwupwup">This is not selected because it has no .nanana class</div>
<div class="nanana">This is selected because it has .wupwupwup before and itself matches .nanana</div>
<div>This is not selected because it does not match .nanana and also because the previous element does not match .wupwupwup</div>
1.2. [id^="slide"]:checked
This one again consists of two selectors: [id^="slide"] and :checked. :checked is explained very simply: x:checked selects all elements that match x as long as they are "checked". An element is "checked" for example if it is a checkbox or radio button and is checked. So we now need to examine the x in this case [id^="slide"]. That is a selector which selects all elements which have an attribute id which starts with slide. So it would select all elements with ids like slide, slide-1-trigger, slide-2-trigger, slider, and so on.
So what the whole [id^= "slide"]:checked + .slide does can be explained like this: It selects all elements with the class slide that directly follow a "checked" element with an ID that begins with slide.
In your case ...
... this means, that for example the element <section class="slide slide-one"> after a checked <input id="slide-1-trigger" type="radio" name="slide" checked> will be selected.
2. The rules
{
left:0;
z-index:100;
transition:left .65s ease-out;
}
First off: You can read about transitions on MDN.
What your transition basically does is: Make the change of the property left to the value 0 smooth for 0.65 seconds. While it does this, it subtly uses a special easing function called ease-out but you can omit that probably without noticeable differences. The z-index of 100 makes this current slide the top-most so that it is not hidden behind the other slides.
Another thing ...
... that you may have missed: The <label ...> elements that you use will mark the corresponding <input ...> elements as checked if you click on the labels. That is why their state changes and then the :checked selector takes effect.
:checked is a CSS pseudo-class selector that represents any radio, checkbox or option that has been checked/clicked. That segment of CSS is just targeting any id of slide-trigger and performing a transition left when the :checked pseudo-class is active. I hope that was helpful
I have the following html:
<div class="mydiv">
<p>some text here</p>
<input type='text' />
</div>
...with the following CSS:
.mydiv {
background-color:yellow;
}
.mydiv:focus, .mydiv:hover {
background-color:orange;
}
The :hover is changing the background color appropriately, but the :focus is not having any effect. Is this because the <div> cannot truly have focus?
Is there a CSS solution to make .mydiv change background color when any of its children receive focus?
Here's a fiddle.
There is no CSS solution for this. But, you can achieve this by using jQuery.
$(".mydiv").children().focus(function() {
$(this).parent().css("background-color", "orange");
}).blur(function() {
$(this).parent().css("background-color","yellow");
});
Here is the Fiddle
You have to add the tabindex attribute to the element needs to be focusable.
Here is the Fiddle
But, to answer your question, there is no pure CSS solution to make the div bg color change if its children receive focus.
When using jQuery, I think you're better off using the focusin and focusout events.
The code as adapted from the accepted answer would then become:
$(".mydiv").focusin(function() {
$(this).css("background-color", "orange");
}).focusout(function() {
$(this).css("background-color","yellow");
});
though, personally, I'd rather use a "focus" class:
$(".mydiv").focusin(function() {
$(this).addClass("focus");
}).focusout(function() {
$(this).removeClass("focus");
});
combined with the css for the combined selector:
.mydiv.focus { background-color: orange }
p.s. For once, I find the bit of docs on w3schools more informative than the demo on api.jquery.com, which just looks confusing to me.
Possible CSS solution:
<style>
#row1 {display: block; position: relative; width: 100%; background-color: #ffffff; z-index: 150;}
.BGmagic {display: none; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; background-color: #efefef; z-index: 200;}
#inputone{display: block; position: relative; z-index: 250;}
#inputone:focus + .BGmagic {display: block;}
#inputone:hover + .BGmagic {display: block;}
</style>
<form>
<div ID="row1">
<p style="position: relative; z-index: 250;">First name:</p>
<input ID="inputone" type="text" name="firstname">
<div class="BGmagic"></div>
</div>
</form>
I am setting up a FAQ page. On the page I have a div, of class=”faq_container”, with 6 child divs arranged in a 3×3 grid that contain the faq questions. So basically I have 6 clickable boxes.
Each question, when clicked, will reveal its answer hiding the all the questions but maintained within the faq_container div. There would be a close link below the answer to hide the answer and take you back to the questions.
I know this is probably pretty simple. I’m hoping someone can help me out.
Thanks!
While you've accepted a JavaScript solution, there are (at least) two ways that this can be achieved with CSS alone, the first using CSS :target pseudo-classes, and the second using input, and label, elements.
The first, assuming HTML similar to the following:
<div id="faq_container">
<ol>
<li id="faq1">
<h2>Question 1</h2>
<div>
<p>Text, relating to question one.</p> <a class="close" href="#hide">close</a>
<!-- the above link doesn't link to anything, just changes the hash whcih stops the ':target' pseudo-class matching the the current 'div' element -->
</div>
</li>
<!-- subsequent elements follow the above structure, stripped for brevity -->
</ol>
</div>
With the following CSS (albeit there's more CSS in the demo, since I've stripped out some of the purely aesthetic stuff here, for brevity, as above):
li {
/* some stripped out aesthetics */
position: relative; /* used to position the '.close' links */
}
li div {
height: 0; /* to allow for animation of the height 'none' to 'block' can't animate */
overflow: hidden;
/* all vendor prefixes removed for brevity, here and later */
transition: all 0.5s linear; /* animates to the default properties, from other 'states' */
}
/* li:target matches when the 'id' of the 'li' is equal to the hash/fragment-identifier in the URL */
li:target div {
height: 4em; /* to allow for animation (this is the awkward part of using pure CSS) */
transition: all 0.5s linear; /* transitions to the 'selected' state (when the user clicks a link in the 'h2' element) */
}
li a:link, li a:visited {
/* aesthetics removed */
}
/* styling the 'interactive' states (:hover, :active, :focus), and the 'selected' state using 'li:target h2 a' */
li a:hover, li a:active, li a:focus, li:target h2 a {
font-weight: bold;
text-decoration: underline;
}
a.close {
/* styling the '.close' link, so it's invisible in the 'non-selected' state */
position: absolute;
opacity: 0;
width: 0;
overflow: hidden;
transition: all 0.65s linear;
}
/* styling the '.close' link, so it's only visible when the question is 'selected' */
li:target a.close {
opacity: 1;
width: 4em;
transition: all 0.65s linear;
}
JS Fiddle demo.
The second approach uses label and input elements (type="radio" if only one question can be visible at a time, type="checkbox" if multiple elements can be visible), based on the following HTML:
<input id="close" name="question" type="radio" />
<div id="faq_container">
<ol>
<li>
<input id="faq1" type="radio" name="question" />
<h2><label for="faq1">Question 1</label></h2>
<div>
<div>
<p>Text, relating to question one.</p>
<label for="close">Close</label>
<!-- the above 'label' closes the question, by referring to an
'input' of the same name (different 'id'), taking advantage
of the fact that only one radio-'input' of a given name can
be checked (this 'input' is just before the ancestor 'ol') -->
</div>
</div>
</li>
<!-- subsequent elements follow the above structure, stripped for brevity -->
</ol>
</div>
And the following CSS (as before, aesthetics removed for brevity):
/* you could, instead, use a class-name to identify the relevant radio-inputs */
input[type=radio] {
/* using 'display: none' (apparently) in some browsers prevents
interactivity, so we fake it, by hiding: */
position: absolute;
opacity: 0;
left: -1000px;
}
/* styling the 'div' that's the adjacent-sibling of an 'h2' which is an
adjacent-sibling of an 'input' all of which are descendants of a 'div' */
div input + h2 + div {
height: 0; /* to allow for animating with transitions */
overflow: hidden;
/* vendor prefixes, again, stripped out */
transition: all 0.5s linear;
}
/* using 'input:checked + h2 + div' causes problems in Chrome, check the references;
so we're styling (respectively) a 'div' which is an adjacent sibling to an 'h2'
which is an adjacent-sibling of a checked 'input', and/or
a 'div' which is a general-sibling of a checked 'input' (in both cases these are
all descendants of another 'div' element) */
div input:checked + h2 + div,
div input:checked ~ div {
height: 4em; /* to allow for animating with transitions */
overflow-y: auto; /* a personal preference, but allows for
scrolling if the height is insufficient
though it can be a little ugly, with a flicker */
transition: all 0.5s linear;
}
JS Fiddle demo.
The same approach can be used with checkboxes, which allows the label to toggle the display of the relevant question, and makes the close links/labels pointless, HTML:
<div id="faq_container">
<ol>
<li>
<input id="faq1" type="checkbox" name="question" />
<h2><label for="faq1">Question 1</label></h2>
<div>
<div>
<p>Text, relating to question one.</p>
</div>
</div>
</li>
<!-- subsequent elements follow the above structure, stripped for brevity -->
</ol>
</div>
And CSS (precisely as the preceding example, but changed input[type=radio] to input[type=checkbox]):
/* duplicated, and aesthetic, CSS removed for brevity */
input[type=checkbox] {
position: absolute;
opacity: 0;
left: -1000px;
}
JS Fiddle demo.
References:
:target pseudo-selector.
Adjacent-sibling (+) combinator.
General-sibling (~) combinator.
Problems using chained adjacent-sibling combinators, particularly in Chrome: "Why does the general-sibling combinator allow toggling pseudo-element's content, but not the adjacent-sibling?"
If a jQuery solution is allowed, here is a quick mock-up.
$(".wrapper").click(function(){
$(this).children(".answer").toggle();
$(".wrapper").not(this).toggle();
$(".faq_container").toggleClass("active");
});
The simplest means of achieving what you're asking for comes down to changing the "class" attribute value of these DIV elements when their respective OnClick events are fired. For that, you'll need to use a scripting engine of some kind, and that is likely going to be JavaScript unless you want a post back, in which case you can just handle it in the code behind of the page. JQuery, as others have mentioned, is a good choice, but comes with some overhead.
The way this site works is that you post what you've tried so far, and what results you're getting. I get the impression that you haven't tried anything, so I would suggest that you do some searching on this site or your web search engine of choice for a string like "javascript change css class onclick" and see where that leads you.
Without more specifics on your exact use case and environment, you are unlikely to get a "here, copy and paste this code into your page" type of answer.
[EDIT] Never mind. I always underestimate the compulsion of developers to begin writing code before knowing any constraints. Enjoy your copypasta.
You should use this kind of structure :
$('.question').on('click', function(ev) {
ev.preventDefault();
$(this).find('.answer').show();
});
$('.close').on('click', function(ev) {
ev.preventDefault();
ev.stopPropagation();
var dismiss = $(this).data('dismiss');
$(this).closest('.'+dismiss).hide();
});
.faq {
position: relative;
width: 600px;
}
.question {
height: 178px; width: 178px;
margin: 5px;
padding: 5px;
border: 1px solid black;
background: #efefef;
float: left;
cursor: pointer;
}
.answer {
position: absolute;
top: 0; left: 0;
height: 578px; width: 578px;
margin: 5px;
padding: 5px;
border: 1px solid black;
background: #bebebe;
cursor: default;
display: none;
}
a.close {
position: absolute;
top: 5px; right: 5px;
display: block;
height: 20px; width: 20px;
color: black;
border: 1px solid black;
line-height: 20px;
text-align: center;
text-decoration: none;
}
a.close:hover {
background: #9f9f9f;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<section class="faq">
<article class="question">Question 1 ?
<div class="answer">
Answer 1 !
×
</div>
</article>
<article class="question">Question 2 ?
<div class="answer">
Answer 2 !
×
</div>
</article>
<article class="question">Question 3 ?
<div class="answer">
Answer 3 !
×
</div>
</article>
<article class="question">Question 4 ?
<div class="answer">
Answer 4 !
×
</div>
</article>
<article class="question">Question 5 ?
<div class="answer">
Answer 5 !
×
</div>
</article>
<article class="question">Question 6 ?
<div class="answer">
Answer 6 !
×
</div>
</article>
<article class="question">Question 7 ?
<div class="answer">
Answer 7 !
×
</div>
</article>
<article class="question">Question 8 ?
<div class="answer">
Answer 8 !
×
</div>
</article>
<article class="question">Question 9 ?
<div class="answer">
Answer 9 !
×
</div>
</article>
</section>
For the CSS, you'll need to mix float: left for your 3*3 pattern, and position: absolute for each answer.
I tried something with div tag as follows,
<style type="text/css">
#hello{
visibility: visible;
cursor: pointer;
position: absolute;
}
#list{
visibility: hidden;
cursor: pointer;
position: absolute;
top: 30px;
z-index: 1;
background-color: aqua;
}
#second{
position: absolute;
}
</style>
<div id="hello" onclick="{if(list.style.visibility=='hidden'){list.style.visibility='visible';}else{list.style.visibility='hidden'};}">Hello user</div><br/>
<div id="second">Welcome to smartdata</div>
<div id="list">
Home <br/>
SignOut <br/>
</div>
It is working fine but the problem is list is not displaying on the first click. Any thing wrong with my code.??
Your code doesn't work as you expect it to due to the way element.style works.
Check this MDN link on element.style: https://developer.mozilla.org/en/DOM/element.style
Since the style property has the same (and highest) priority in the
CSS cascade as an inline style declaration via the style attribute, it
is useful for setting style on one specific element.
However, it is not useful for learning about the element's style in
general, since it represents only the CSS declarations set in the
element's inline style attribute, not those that come from style
rules elsewhere, such as style rules in the section, or
external style sheets.
So when you first run your code and even if your element.style.hidden is declared in the external CSS sheet, the style declaration remains empty and you need to perform additional checks.
if (!list.style.visibility || list.style.visibility === 'hidden') {...}
You can take a look at the fiddle to see it work: http://jsfiddle.net/Kk6TJ/1/
Also:
It's best to use triple equal === to perform strict comparison without converting variable type.
You don't need curly braces in your event handlers. If you were hoping that they would create scope - they don't! Only functions in JavaScript have scope.
list.style.visibility=='hidden' is a false statement on first click
try this
{if(list.style.visibility=='hidden' || list.style.visibility='')
<style type="text/css">
#hello{
visibility: visible;
cursor: pointer;
position: absolute;
}
#list{
visibility: hidden;
cursor: pointer;
position: absolute;
top: 30px;
z-index: 1;
background-color: aqua;
}
#second{
position: absolute;
}
</style>
<div id="hello" onclick="{if(list.style.visibility=='hidden' || list.style.visibility==''){list.style.visibility='visible';}else{list.style.visibility='hidden'};}">Hello user</div><br/>
<div id="second">Welcome to smartdata</div>
<div id="list">
Home <br/>
SignOut <br/>
</div>
This is because your if..else are not in order. Re-ordering of decision statement corrected the behavior, Now first click is showing the menu items.
Also, If you run your script and watch it in firebug console you'll see your javascript code is throwing warning on first click.
I've updated your code -
<style type="text/css">
#hello{
visibility: visible;
cursor: pointer;
position: absolute;
}
#list{
visibility: hidden;
cursor: pointer;
position: absolute;
top: 30px;
z-index: 1;
background-color: aqua;
}
#second{
position: absolute;
}
</style>
<script type="text/javascript">
function Clickme()
{
var list = document.getElementById('list');
if(list.style.visibility=='visible')
{
list.style.visibility='hidden';
}
else
{
list.style.visibility='visible'
}
}
</script>
<div id="hello" onclick="Clickme();">Hello user</div><br/>
<div id="second">Welcome to smartdata</div>
<div id="list">
Home <br/>
SignOut <br/>
</div>
Styles defined in style tags and css files are not in the element.style.property property, they are available if the element has its style set inline <element style="property:value;"> or explicitly element.style.property = value;
To get styles for an element defined in style tags/sheets use window.getComputedStyle(element, null).getPropertyValue(property);`
So you can either inline the styles on list, use getComputedStyle getPropertyValue or use the fact that list.style.visibility is going to be empty on the first click.
Go for something like this -
if(list.style.visibility=="visible")
{
list.style.visibility="hidden";
}
else
{
list.style.visibility="visible"
}
Please answer the following questions:
How to merge search box and search button as shown in below example1 and example2? The box and button are joined together.
How to put 'magnifier' icon on the left side of the search box?
How to put a default text into the box like 'Search for items' and fade it when user clicks on the box.
Example1
Example2
Example3 (I don't want a separate button as shown below)
Please help! Thanks!!
Easiest way is to make the entire text field wrapper, from the icon on the left to the button on the right, one div, one image.
Then put a textfield inside that wrapper with a margin-left of like 30px;
Then put a div inside the wrapper positioned to the right and add a click listener to it.
HTML:
<div id="search_wrapper">
<input type="text" id="search_field" name="search" value="Search items..." />
<div id="search_button"></div>
</div>
CSS:
#search_wrapper{
background-image:url('/path/to/your/sprite.gif');
width:400px;
height:40px;
position:relative;
}
#search_field {
margin-left:40px;
background-transparent;
height:40px;
width:250px;
}
#search_button {
position:absolute;
top:0;
right:0;
width:80px;
height:40px;
}
JQuery:
$(function(){
// Click to submit search form
$('#search_button').click(function(){
//submit form here
});
// Fade out default text
$('#search_field').focus(function(){
if($(this).val() == 'Search items...')
{
$(this).animate({
opacity:0
},200,function(){
$(this).val('').css('opacity',1);
});
}
});
});
For your first question, there are many ways to accomplish the joining of the button to the search box.
The easiest is to simply float both elements to the left:
HTML:
<div class="wrapper">
<input placeholder="Search items..."/>
<button>Search</button>
</div>
CSS:
input,
button {
float: left;
}
Fiddle
This method has some limitations, however, such as if you want the search box to have a percentage-based width.
In those cases, we can overlay the button onto the search box using absolute positioning.
.wrapper {
position: relative;
width: 75%;
}
input {
float: left;
box-sizing: border-box;
padding-right: 80px;
width: 100%;
}
button {
position: absolute;
top: 0;
right: 0;
width: 80px;
}
Fiddle
The limitation here is that the button has to be a specific width.
Probably the best solution is to use the new flexbox model. But you may have some browser support issues.
.wrapper {
display: flex;
width: 75%;
}
input {
flex-grow: 2;
}
Fiddle
For your second question (adding the magnifier icon), I would just add it as a background image on the search box.
input {
padding-left: 30px;
background: url(magnifier.png) 5px 50% no-repeat;
}
You could also play around with icon fonts and ::before pseudo-content, but you'll likely have to deal with browser inconsistencies.
For your third question (adding placeholder text), just use the placeholder attribute. If you need to support older browsers, you'll need to use a JavaScript polyfill for it.
It's all in the CSS... You want something like this:
http://www.red-team-design.com/how-to-create-a-cool-and-usable-css3-search-box
Also, for the search icon:
http://zenverse.net/create-a-fancy-search-box-using-css/
Src: Quick Google.
You don't merge them, rather you give the illusion that you have. This is just CSS. Kill the search box borders, throw it all into a span with a white background and then put the fancy little dot barrier between the two things. Then toss in some border radius and you are in business.
The above tut might look too lengthy. The basic idea is this:
Arrange the input box just like you do. The input text box should be followed by the button. add the following css to do that.
position:relative;
top:-{height of your text box}px;
or you can use absolute positioning.
<div id="search_wrapper">
<input type="text" id="search_field" name="search" placeholder="Search items..." />
<div id="search_button">search</div>
</div>
#search_wrapper{
background-color:white;
position:relative;
border: 1px solid black;
width:400px;
}
#search_field {
background-transparent;
border-style: none;
width: 350px;
}
#search_button {
position:absolute;
display: inline;
border: 1px solid black;
text-align: center;
top:0;
right:0;
width:50px;
}
http://jsfiddle.net/zxcrmyyt/
This is pretty much easy if You use bootstrap with custom css
My output is diffrent but the logic works as it is..
I have used Bootstrap 5 here you can also achieve this by using Pure CSS,
<div class="container my-5">
<div class="row justify-content-center">
<div class="col-10 p-0 inputField text-center">
<input type="text" id="cityName"placeholder="Enter your City name..">
<input type="submit" value="search" id="submitBtn">
</div>
</div>
</div>
For Styling
#import url('https://fonts.googleapis.com/css2?family=Ubuntu&display=swap');
* {
font-family: 'Ubuntu', sans-serif;
}
.inputField {
position: relative;
width: 80%;
}
#cityName {
width: 100%;
background: #212529;
padding: 15px 20px;
color: white;
border-radius: 25px;
outline: none;
border: none;
}
#submitBtn {
position: absolute;
right: 6px;
top: 5px;
padding: 10px 20px;
background: rgb(0, 162, 255);
color: white;
border-radius: 40px;
border: none;
}
Hear is an Example !
https://i.stack.imgur.com/ieBEF.jpg