This question already has answers here:
How to remove the border highlight on an input text element
(21 answers)
CSS: border color of input box has two colors?
(4 answers)
Closed 2 years ago.
Why do buttons and input have this unusual outline with black and grey borders?
I can't tell if this is only my issue, but the border appears on buttons and also inputs.
Here is my code and an image of my navbar:
.navbar-vert-spacer {
height: 10px;
}
.main-nav-bar {
border-radius: 25px;
box-shadow: 2px 2px 8px #d4d4d4;
height: 50px;
width: 1800px;
margin-left: 10px;
margin-right: 10px;
}
.home-icon {
height: 30px;
text-align: center;
padding: 10px;
margin-left: 5px;
}
.search-bar {
background: #D4D4D4;
border-radius: 25px;
height: 10px;
width: 1710px;
padding: 10px;
margin-right: 8px;
margin-top: 8px;
float: right;
}
<div class="navbar-vert-spacer"></div>
<!-- NAVBAR -->
<div class="navbar">
<div class="main-nav-bar">
<a href="http://127.0.0.1:5000/">
<img class="home-icon" src="static/home.ico">
</a>
<input type="text" placeholder="Search.." class="search-bar">
</div>
</div>
<!-- NAVBAR -->
https://i.stack.imgur.com/y46Sg.png
Because border add default border-color & width
.search-bar {
border: 0;
outline: 0;
}
chrome default styles
there are some styles applied by the browser itself.
if you don't want to have this outline you can use
.search-bar {
outline:none
}
Related
This question already has answers here:
How do I make corners rounded only on the top part of the border in css? [closed]
(3 answers)
Closed 1 year ago.
I have a little img card and i need to make its top corners have border-radius but when i apply it all corners become round
here's example
.card-1{
width: 200px;
background: #5d5d5d;
border-radius: 10px;
}
<div>
<div class="card-1">
lorem ipsumm dolor sit amet
</div>
<h1>
Tittle
</h1>
<p>
text here
</p>
</div>
You have to use separate border radiuses. Try on this in your css file
border-radius: 15px 15px 0px 0px;
try this:
border: 3px solid #f00;
border-radius: 10px 10px 0px 0px;
There are special css properties to define border radius for each corner of a box. The css property border-radius is actually a shorthand for them. See https://developer.mozilla.org/de/docs/Web/CSS/border-radius fro details.
div {
width: 10em;
height: 5em;
padding: 1em;
border: 1px solid black;
}
.one {
border-top-left-radius: 1em;
border-top-right-radius: 1em;
}
.two {
border-radius: 1em 1em 0 0;
}
body {
display: flex;
}
<div class="one">One</div>
<div class="two">Two</div>
This question already has answers here:
How to make Flexbox items the same size
(10 answers)
Closed 2 years ago.
I am very confused about the following problem. HTML:
<div className="SearchBar">
<div className="SearchBar-container">
<input />
<input />
</div>
</div>
CSS:
SearchBar {
background-color: #0055ff;
margin: 0 auto;
border-radius: 10px;
width: 80%;
border: 2px solid red;
}
.SearchBar-container {
display: flex;
}
.SearchBar-container input {
border: 1px solid #fff;
border-radius: 4px;
font-size: .77rem;
font-weight: 500;
height: 40px;
}
If I try ANY other HTML tag like span, div, a whatever it aligns them in the middle perfectly well. But elements go straight to the right... I tried display:inline-block earlier but the same problem. Any help is much appreciated!
For the record I want two input fields equally horizontally distributed within a div!
If you add flex:1 to the CSS for the inputs they will get evenly distributed in the flexed row.
I've added color background here so you can see clearly which is what element.
SearchBar {
background-color: #0055ff;
margin: 0 auto;
border-radius: 10px;
width: 80%;
border: 2px solid red;
}
.SearchBar-container {
background-color: magenta;
display: flex;
}
.SearchBar-container input {
background-color: cyan;
border: 1px solid #fff;
border-radius: 4px;
font-size: .77rem;
font-weight: 500;
height: 40px;
flex: 1;
}
<div class="SearchBar">
<div class="SearchBar-container">
<input />
<input />
</div>
</div>
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about programming within the scope defined in the help center.
Closed 2 years ago.
Improve this question
In this image, how do I get rid of the gray background that automatically appears when I create my CSS header?
.header {
padding: 60px;
margin: 20px auto auto auto;
width: 1400px;
border-radius: 10px;
text-align: center;
background: #1abc9c;
color: white;
}
body {
background: #f2f2f2;
}
.search {
width: 100%;
position: relative;
display: flex;
}
.searchTerm {
width: 4500px;
border: 3px solid #1abc9c;
border-right: none;
padding: 5px;
height: 50px;
border-radius: 5px 0 0 5px;
outline: none;
color: #fff;
}
.searchTerm:focus {
color: black;
}
.searchButton {
width: 50px;
height: 50px;
border: 1px solid #1abc9c;
background: #1abc9c;
text-align: center;
color: #fff;
border-radius: 0 5px 5px 0;
cursor: pointer;
font-size: 20px;
}
/*Resize the wrap to see the search bar change!*/
.wrap {
width: 30%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 900px;
margin: auto;
}
<div class="header">
<h1 style="font-size: 100px;">HI</h1>
<p style="font-size: 30px;">
Hello
</p>
</div>
<div class="wrap">
<div class="search">
<input type="text" class="searchTerm" id="input_text" />
<button type="submit" class="searchButton" onclick="send_text()">
<i class="fa fa-search"></i>
</button>
</div>
</div>
<div class="search"></div>
Thanks!
When I add this CSS and HTML I start getting that gray background around the header. However when I comment out the code for the search bar the header does not have the gray background.
The reason is because you are using this in your css, it is creating greyish background in your html:
body {
background: #f2f2f2;
}
Сheck that the html has a class .header
Try changing the background-color of the .header and see what happens
Try setting the background-color for the body and see what happens
This question already has answers here:
border curved css - circle with curved end
(2 answers)
Closed 2 years ago.
I want to have a tabs like image below, but I don't have any idea to make it.
Make the tab into a png image. Here is one I did really quick. I have a border on the top and no border on the bottom so it will overlay the existing border making appear as it curves up
Then combine it with some styling to get your result
*:focus {
outline: none;
}
.content {
box-sizing: border-box;
background-color: #F7F7F7;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border: 1px solid #d5d1d1;
}
.tabs {
margin-bottom: -1px;
background-color: white;
border: 1px solid #F4C949;
border-radius: 20px;
margin: -1px;
padding: 0px 20px;
padding-top: 8px;
text-align: right;
}
.tab {
position: relative;
z-index: 2;
display: inline-block;
width: 175px;
height: 30px;
margin-bottom: -6px;
padding-top: 8px;
text-align: center;
}
.tab:focus {
background: url(https://i.stack.imgur.com/45ecy.png);
background-size: contain;
background-position: top;
background-repeat: no-repeat;
}
.tab-content {
height: 175px;
}
<div class="content">
<div class="tabs">
<div class="tab tab-active" tabindex="0">
Tab 1
</div>
<div class="tab" tabindex="0">
Tab 2
</div>
</div>
<div class="tab-content">
Click tab to get the effect
</div>
</div>
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 8 years ago.
I'm experiencing a strange behaviour with the HTML button tag. It seems that when I place two buttons side by side, they have a 4px gap between them appearing out of nowhere.
Here is a fiddle which shows the issue.
As you can see from the image below, FireBug shows that the gap is neither a margin or a padding (since a padding would be shown in purple).
As a note: I'm using the latest version of Firefox on Windows 8.1 and I tried also with the CSS Reset from Eric Mayer, but the gap is still there.
It's not a really important problem, but it would be nice to know if it's normal or not and what causes it.
The problem is that in inline-block elements the whitespace in HTML becomes visual space on screen. Some solutions to fix it:
Use font-size: 0 to parent container(you have to define font-size to child elements):
.buttons {
width: 304px;
margin: 0 auto;
z-index: 9999;
margin-top: 40px;
font-size: 0;
}
button {
background-color: transparent;
border: 1px solid dimgray;
width: 150px;
height: 40px;
cursor: pointer;
}
<div class="buttons">
<button>Button1</button>
<button>Button2</button>
</div>
Another one is to use negative margin-left: -4px
.buttons {
width: 304px;
margin: 0 auto;
z-index: 9999;
margin-top: 40px;
}
button {
background-color: transparent;
border: 1px solid dimgray;
width: 150px;
height: 40px;
cursor: pointer;
margin-left: -4px;
}
<div class="buttons">
<button>Button1</button>
<button>Button2</button>
</div>
Last but i don't like it at all is to use html comments as spacers
between gaps:
.buttons {
width: 304px;
margin: 0 auto;
z-index: 9999;
margin-top: 40px;
}
button {
background-color: transparent;
border: 1px solid dimgray;
width: 150px;
height: 40px;
cursor: pointer;
}
<div class="buttons">
<button>Button1</button><!--
--><button>Button2</button>
</div>
All above will work. Good luck :)
It's because you have whitespace between button elements. Change your HTML to:
Fiddle
<div class="buttons">
<button>Button1</button><button>Button2</button>
</div>
If you just want to display one line between these buttons, add margin: -1px.
Fiddle
button {
background-color: transparent;
border: 1px solid dimgray;
width: 150px;
height: 40px;
margin: -1px;
cursor: pointer;
}
Additional Tweaks:
In Firefox, when you click on a button, it displays a weird dotted border like below:
Fiddle
To get rid of this, add this to your CSS:
button::-moz-focus-inner {
border: 0;
}
One more thing(Firefox): when you click on the button, the text moves. To prevent this add this to your CSS:
Fiddle
button:active {
padding: 0;
}
It can be corrected by
button {
background-color: transparent;
border: 1px solid dimgray;
width: 150px;
height: 40px;
cursor: pointer;
float:left;
}
As others have said, it is the whitespace between your elements. If you're using PHP, you could do something like this:
<div class="buttons">
<button>Button1</button><?php
?><button>Button2</button>
</div>
Otherwise, you could do this:
<div class="buttons">
<button>Button1</button><
button>Button2</button>
</div>
Or this, as suggested from the comments:
<div class="buttons">
<button>Button1</button><!--
--><button>Button2</button>
</div>
if you float: right; or float: left; you will see no space.
jsfiddle