This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed last month.
I would like to ask, I hope that when the input box foucs, the border of the outermost search_bar can be thickened and changed color, but because the design draft needs my HTML structure as the example, so there are other ways to focus When changing the frame color and line thickness of search_bar?
.search_bar {
display: flex;
align-items: center;
width: 90%;
padding: 10px 8px;
border-radius: 4px;
background-color: #fff;
border: 1px solid #222;
}
.search_bar .search_icon {
width: 24px;
height: 24px;
background-image: url("https://png.pngtree.com/element_our/20200702/ourmid/pngtree-magnifying-glass-icon-image_2292648.jpg");
background-repeat: no-repeat;
background-size: cover;
}
.search_bar .search_input {
width: 100%;
border: 0px;
margin-left: 6px;
font-size: 16px;
}
.search_bar .search_input:focus .search_bar {
border: 1px solid red;
}
.search_bar .enter {
white-space: nowrap;
}
<div class="search_bar">
<label for="search_input" class="search_icon"></label>
<input id="keyWord" class="search_input" type="text" placeholder="輸入問題關鍵字">
<button class="enter" id="js-search">搜尋</button>
</div>
In this case you could use a CSS pseudo-class named :focus-within, which
matches an element if the element or any of its descendants are focused
.search_bar:focus-within {
border: 1px solid red;
}
.search_bar {
display: flex;
align-items: center;
width: 90%;
padding: 10px 8px;
border-radius: 4px;
background-color: #fff;
border: 1px solid #222;
}
.search_bar .search_icon {
width: 24px;
height: 24px;
background-image: url("https://png.pngtree.com/element_our/20200702/ourmid/pngtree-magnifying-glass-icon-image_2292648.jpg");
background-repeat: no-repeat;
background-size: cover;
}
.search_bar .search_input {
width: 100%;
border: 0px;
margin-left: 6px;
font-size: 16px;
}
.search_input:focus {
outline: none;
}
.search_bar:focus-within {
border: 1px solid red;
}
.search_bar .enter {
white-space: nowrap;
}
<div class="search_bar">
<label for="search_input" class="search_icon"></label>
<input id="keyWord" class="search_input" type="text" placeholder="輸入問題關鍵字">
<button class="enter" id="js-search">搜尋</button>
</div>
I have the following flex item (#globalSearchContLi) inside a flex-container. The container is an unordered list.
My problem is that I'm creating a fun looking search bar with a half-sphere submit button. The button is pretty much attached to the search bar with inline-block and margin properties.
This bundle (the search bar and button) won't center in the div any way I try to.
I tried setting #globalSearchCont with a specific width and auto side margins, but the whole flexbox presentation won't display correctly on mobile.
Any suggestions/advice? Thanks in advance.
#globalSearchContLi {
flex-grow: 7;
margin: 0px 15px;
flex-basis: 100px;
}
#globalSearchContLi {
flex-grow: 7;
margin: 0px 15px;
flex-basis: 100px;
}
#munchGlobalSearchbar {
width: 240px;
height: 50px;
/* box-shadow: 0 0 0 1px#000,0 0 0 3px #FFF, 0 0 0 5px #333; */
font-weight: 300;
font-size: 1.6rem;
border-radius: 10px;
display: inline-block;
margin-top: 20px;
text-align: center;
background-color: #edad0c;
border-bottom: 2px solid #333;
border-top: 2px solid #333;
border-left: 2px solid #333;
}
#munchGlobalSearchbar::placeholder {
color: #000;
}
#globalSearchBtn {
background-image: url(../imgs/addOn/panEmoji.png);
width: 50px;
height: 51px;
margin: 0px 0px -17px -12px !important;
border-bottom-right-radius: 50%;
border-top-right-radius: 50%;
display: inline-block;
border: 2px solid #333;
background-color: #38b32b;
transition: .2s all ease;
}
.backImageCon {
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
<li id="globalSearchContLi">
<div id="globalSearchCont">
<input placeholder="Search..." type="textbox" name="globalSearch" id="munchGlobalSearchbar">
<div id="globalSearchBtn" class="backImageCon"></div>
</div>
</li>
Use justify-content: center on the parent to horizontally center the button elements.
#globalSearchContLi {
list-style-type: none;
margin-left: 0;
}
#globalSearchCont {
display: flex;
justify-content: center;
height: 50px;
}
#munchGlobalSearchbar {
width: 240px;
font-weight: 300;
font-size: 1.6rem;
border-radius: 10px;
text-align: center;
background-color: #edad0c;
border-bottom: 2px solid #333;
border-top: 2px solid #333;
border-left: 2px solid #333;
}
#munchGlobalSearchbar::placeholder {
color: #000;
}
#globalSearchBtn {
background-image: url(../imgs/addOn/panEmoji.png);
width: 50px;
border-bottom-right-radius: 50%;
border-top-right-radius: 50%;
border: 2px solid #333;
background-color: #38b32b;
transition: .2s all ease;
margin-left: -10px;
}
.backImageCon {
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
ul {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
<ul>
<li id="globalSearchContLi">
<div id="globalSearchCont">
<input placeholder="Search..." type="textbox" name="globalSearch" id="munchGlobalSearchbar">
<div id="globalSearchBtn" class="backImageCon"></div>
</div>
</li>
</ul>
I have input and on focus I show omg before placeholder and text, but now displays from top to down and I need from left to right and best used transforms, and it would be from left to right just as it is now text. Can someone help me?
Thank you.
input[type="text"] {
width: 100%;
height: 25px;
padding: 1rem;
font-size: 14px;
border: 1px solid #e6e6e6;
outline: none;
transition: all .2s linear;
}
input[type="text"]:focus {
background: url("https://svgshare.com/i/97k.svg") no-repeat;
background-size: 27px 27px;
background-position: 5px center;
background-color: white;
padding-left: 35px;
border-color: #cccccc;
color: black;
transform-origin: 50% 50%;
}
<input type="text" placeholder="Text">
Here you go:
input[type="text"] {
width: 100%;
height: 25px;
padding: 1rem;
font-size: 14px;
border: 1px solid #e6e6e6;
outline: none;
transition: all .2s linear;
background: url("https://svgshare.com/i/97k.svg") no-repeat;
background-size: 27px 27px;
background-position: -35px center;
}
input[type="text"]:focus {
background-position: 10px center;
background-color: white;
padding-left: 45px;
border-color: #cccccc;
color: black;
transform-origin: 50% 50%;
}
<input type="text" placeholder="Text">
How to make the zipcode field & CHECK button on oneline using CSS. My website page is responsive. I am providing you the css file of this section. I had tried but output is not coming which i want. I want the CHECK button to the right side of the textfield. I am attaching the screehshot. Any help will be appreciated. I had added the HTML & CSS code below for any queries.
#media only screen and (min-width: 300px) and (max-width: 767px) {
.z-btn button {
background: #000 none repeat scroll 0 0;
position: unset;
}
.z-btn input.product-custom-option {
border: 0 none;
float: right !important;
height: auto;
line-height: 31px;
margin-left: 7px;
width: 80%;
}
}
div.product-view .add-to-cart {
padding-bottom: 15px;
}
div.product-view .add-to-cart-buttons {
float: right;
margin-right: 0px;
max-width: 100%;
width: 82%;
}
.z-btn label {
background: rgba(0, 0, 0, 0) url("img/van-icon.png") no-repeat scroll right 2px top 3px / 96% auto;
float: left;
font-size: 13px;
height: auto;
line-height: 28px;
text-indent: -9999px;
width: 37px;
}
. .z-btn button {
background: #000 none repeat scroll 0 0;
float: right !important;
font-size: 13px;
padding: 6px 20px;
/*margin-top: -31px;*/
position: absolute;
}
.input-box > div#cod_msg {
display: inline-block;
float: left;
font-size: 22px;
text-align: center;
width: 100%;
}
.cod-suc,
.cod-error {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background: #fff none repeat scroll 0 0;
border-color: -moz-use-text-color #ccc #ccc;
border-image: none;
border-style: none solid solid;
border-width: 0 1px 1px;
float: left;
margin-bottom: 10px;
padding: 2px 11px 3px;
position: relative;
text-align: center;
top: -3px;
width: 100%;
}
#cod_msg img {
display: inline-block;
float: none;
text-align: center;
width: 3%;
}
.cod-error {
color: #ff0000;
}
.cod-suc {
color: #009036;
}
div.product-view .add-to-cart-buttons button#zip-check.button {
line-height: 32px;
min-height: auto;
width: auto;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<input placeholder="Enter your pincode" value="" name="cod" class="product-custom-option required-entry" id="cod" size="29" style="color:black; font-size:12px" type="text">
<button id="zip-check" class="button" type="button" onclick="checkCOD();" name="zip-check" title="Check">
Bootstrap button on the right
Using the code posted in the answer:
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<input type="text" placeholder="enter your zip code"/>
<button type="button" class="btn btn-primary">Check</button>
So I am having issues applying a border and a border background to a section of my page. I was wondering how I could do this, I've tried make two rows on the same line and apply a border to each but so far nothing I've tried has worked.
To simplify it: My page looks like this https://gyazo.com/ec14ae14dbb369c29759e48dff21cd52
When I need it to look like this https://gyazo.com/d18863ab12fde6cbe458406c6e0fc69a
HTML
<div class="container">
<div class="row">
<div class="col-md-4">
<div id="map-holder-image">
<img src="img/map-holder.png" class="img-responsive"/>
</div>
</div>
<form class="form" id="border">
<div class="form-group col-xs-4 col-md-4">
<label for="first-name" class="control-label">First Name</label>
<input type="text" class="form-control" id="first-name">
</div>
<div class="form-group col-xs-4 col-md-4">
<label for="email-address" class="control-label">Email</label>
<input type="email" class="form-control" id="email-address">
</div>
<br>
<div class="form-group col-xs-4 col-md-4">
<label for="last-name" class="control-label">Last Name</label>
<input type="text" class="form-control" id="last-name">
</div>
<div class="form-group col-xs-4 col-md-4">
<label for="confirm-email-address" class="control-label">Confirm Email</label>
<input type="email" class="form-control" id="confirm-email-address">
</div>
<div class="form-group col-xs-4 col-md-4" id="date-picker">
<label for="dates" class="control-label">Date of Birth</label>
<select class="date-dropdown" id="day-dropdown-form">
<script>
var daylist = "";
var i;
for (i = 1; i <= 31; i++) {
daylist += "<option>" + i + "</option>";
}
document.getElementById("day-dropdown-form").innerHTML = daylist;
</script>
</select>
<select id="month-dropdown-form">
<script>
var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var monthlist = "";
var i;
for (i = 0; i < months.length; i++) {
monthlist += "<option>" + months[i] + "</option>";
}
document.getElementById("month-dropdown-form").innerHTML = monthlist;
</script>
</select>
<select class="date-dropdown" id="year-dropdown-form">
<script>
var yearlist = "";
var i;
for (i = 2016; i >= 1900; i--) {
yearlist += "<option>" + i + "</option>";
}
document.getElementById("year-dropdown-form").innerHTML = yearlist;
</script>
</select>
</div>
<div class="col-md-4" id="submit-button-col">
<button class="btn btn-info btn-lg" id="submit-button" type="button">
<h3>Submit</h3>
</button>
</div>
</form>
</div>
CSS
/*-- Bootstrap overrides instead of editing source LESS files --*/
h1, h2, h3, h4, h5, h6 {
font-family: 'Open Sans', sans-serif;
}
p, div {
font-family: 'Open Sans', sans-serif;
}
/*-- Custom Styling --*/
#logo {
padding: 10px;
}
#searchbox {
padding: 10px;
}
#search-input {
border: solid 1px gray;
border-radius: 8px;
background-color: #fff;
}
#search-input input {
border: 0;
box-shadow: none;
background: none;
}
#search-button {
padding: 8px;
}
#search-button button {
background: none;
border: none;
}
#login-name {
padding: 10px;
}
#login-name p {
text-align: center;
vertical-align: middle;
line-height: 50px;
float: right;
}
#settings-icon {
padding-top: 20px;
}
.navbar .navbar-inner {
padding: 0;
}
.navbar .nav {
margin: 0;
display: table;
width: 100%;
}
.navbar .nav li {
display: table-cell;
width: 11.1%;
float: none;
text-align: center;
left: 4px;
font-weight: bold;
}
.navbar .nav li a {
border-right: 1px solid black;
}
#active-link {
text-decoration: underline;
}
.navbar .nav li:first-child a {
border-left: 0;
border-radius: 3px 0 0 3px;
}
.navbar .nav li:last-child a {
border-right: 0;
border-radius: 0 3px 3px 0;
}
#detail-request {
text-align: center;
padding: 15px;
}
#banner-top-col {
width: 100%;
padding: 0;
}
#banner-bottom-col {
width: 100%;
padding: 0;
}
#banner-top {
margin: auto;
margin-bottom: 10px;
width: 100%;
height: 250px;
}
.banner-information {
position: absolute;
border: 5px solid #ff6600;
background-color: #ebebeb;
width: 400px;
height: 180px;
border-radius: 7px;
top: 12%;
text-align: center;
padding: 5px;
left: 5%;
}
.banner-information h4 {
font-size: 20px;
text-align: left;
padding-left: 5px;
padding-top: 15px;
}
.banner-information h1 {
font-size: 60px;
padding-left: 5px;
text-align: left;
font-weight: bold;
margin: 0;
}
#map-holder-image {
border: 2px solid #ff6600;
border-radius: 7px;
width: auto;
padding: 1px;
}
#email-address, #confirm-email-address, #first-name, #last-name {
width: 85%;
}
#contact-form-box {
border: 1px solid #ff6600;
width: auto;
background-color: #ebebeb;
border-radius: 7px;
}
.support-box {
border: 2px solid #ff6600;
background-color: #ebebeb;
border-radius: 7px;
text-align: center;
width: 359px;
margin-right: 18.5px;
margin-top: 10px;
display: inline-block;
right: 10px;
height: 230px;
}
.support-box h3 {
font-size: 25px;
text-align: center;
padding: 10px;
}
#support {
margin: 0 auto;
border: 0px solid #ffad41;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;
font-size: 38px;
font-family: arial;
text-decoration: none;
display: inline-block;
text-shadow: 0px 0px 0 rgba(0, 0, 0, 0.3);
font-weight: bold;
color: #FFFFFF;
background-color: #ffc579;
background-image: -webkit-gradient(linear, left top, left bottom, from(#ffc579), to(#fb9d23));
background-image: -webkit-linear-gradient(top, #ffc579, #fb9d23);
background-image: -moz-linear-gradient(top, #ffc579, #fb9d23);
background-image: -ms-linear-gradient(top, #ffc579, #fb9d23);
background-image: -o-linear-gradient(top, #ffc579, #fb9d23);
background-image: linear-gradient(to bottom, #ffc579, #fb9d23);
filter: progid: DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#ffc579, endColorstr=#fb9d23);
text-align: center;
height: 80px;
width: 180px;
}
#support:hover {
border: 0px solid #ff9913;
background-color: #ffaf46;
background-image: -webkit-gradient(linear, left top, left bottom, from(#ffaf46), to(#e78404));
background-image: -webkit-linear-gradient(top, #ffaf46, #e78404);
background-image: -moz-linear-gradient(top, #ffaf46, #e78404);
background-image: -ms-linear-gradient(top, #ffaf46, #e78404);
background-image: -o-linear-gradient(top, #ffaf46, #e78404);
background-image: linear-gradient(to bottom, #ffaf46, #e78404);
filter: progid: DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#ffaf46, endColorstr=#e78404);
}
#support-image {
display: inline-block;
}
#support h3 {
display: inline-block;
padding: 0;
padding-right: 15px;
font-weight: 800;
margin: 0 auto;
}
.date-dropdown {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: url("../img/input-triangle.png") no-repeat white;
background-position: 50px center;
width: 80px;
height: 30px;
border: 1px solid #ddd;
background-size: 28px;
padding-left: 10px;
border-radius: 4px;
margin-top: 10px;
margin-right: 22px;
}
#date-picker {
height: 100px;
}
#month-dropdown-form {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: url("../img/input-triangle.png") no-repeat white;
background-position: 65px center;
width: 95px;
height: 30px;
border: 1px solid #ddd;
background-size: 28px;
padding-left: 10px;
border-radius: 4px;
margin-top: 10px;
margin-right: 22px;
}
#submit-button-col {
text-align: center;
margin: 0 auto;
height: 100px;
}
#submit-button {
margin: 0 auto;
margin-top: 25px;
border: 0px solid #46ec02;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
font-family: arial;
text-decoration: none;
display: inline-block;
text-shadow: 0px 0px 0 rgba(0, 0, 0, 0.3);
font-weight: bold;
color: #FFFFFF;
background-color: #46ec02;
background-image: -webkit-gradient(linear, left top, left bottom, from(#46ec02), to(#28c307));
background-image: -webkit-linear-gradient(top, #46ec02, #28c307);
background-image: -moz-linear-gradient(top, #46ec02, #28c307);
background-image: -ms-linear-gradient(top, #46ec02, #28c307);
background-image: -o-linear-gradient(top, #46ec02, #28c307);
background-image: linear-gradient(to bottom, #46ec02, #28c307);
filter: progid: DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#46ec02, endColorstr=#28c307);
text-align: center;
height: 65px;
width: 200px;
margin-right: 45px;
}
#submit-button h3 {
display: inline-block;
padding: 0;
text-align: center;
margin: 0 auto;
font-weight: 800;
}
#banner-bottom {
margin: auto;
width: 100%;
height: 250px;
padding-top: 15px;
}
#footer {
background-color: #363636;
height: 250px;
}
#footer p {
color: white;
text-align: center;
vertical-align: middle;
line-height: 130px;
}
#footer-line {
border: 1px solid white;
width: 95%;
}
Thanks a lot :)