I have the next input and anchor elements:
<input type="submit" class="button" name="add" value="Button 1" />
<a class="button" href="cpanel.php">Button 2</a>
The css is:
input, textarea, select, button
{font-size: 100%;font-family: inherit;margin:0;padding:0;}
.button{
border: 1px solid #9B9B9B;
background-color: #DADADA;
padding: 0;
margin: 0 20px 5px 0;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
cursor: pointer;
}
The problem is that firefox shows both buttons with different padding:
I use a reset css code and I define a line-height attribute in body.
Thanks.
try:
input::-moz-focus-inner
{
border: 0;
padding: 0;
}
Related
I made some input boxes with 0 20px padding placeholders. However the text I type inside ignores padding and starts from the exact left side (from the left outline). Is there any possibility to position it inside the input field?
HTML:
<div class="input-border">
<label for="sign-login"><i class="fas fa-envelope"></i></label>
<input type="text" name="sign-login" placeholder="Enter your Email">
</div>
CSS:
input::placeholder {
font-size: 16px;
font-family: $font-base;
color: #979797;
padding: 0 20px;
height: 38px;
}
.input-border {
width: 340px;
margin: 10px 0;
border: 1px solid #DEDEDE;
border-radius: 0.5em;
}
I'd like the text I type to start from the same place as my placeholder is
in this case with 0 20px padding.
target the input text input[type=text]{padding:0 20px;}
input::placeholder{
font-size: 16px;
font-family: $font-base;
color: #979797;
padding: 0 20px;
height: 38px;}
.input-border
form .input-container .input-border {
width: 340px;
margin: 10px 0;
border: 1px solid #DEDEDE;
border-radius: 0.5em;}
input[type=text]{padding:0 20px;}
<div class="input-border">
<label for="sign-login"><i class="fas fa-envelope"></i></label>
<input type="text" name="sign-login" placeholder="Enter your Email">
</div>
Use this to add padding to the placeholder.
input::placeholder {
padding: 0 20px;
}
Use this to add padding to input text.
input {
padding: 0 20px;
}
CSS:
.center {
text-align: center;
margin: 0;
}
I´m trying to build a search element together with a button, something like:
Except that I need to change the background color of the search icon (blue, gray, whatever...).
Here is my code so far and the result:
.searchWrap {
position: absolute;
border: thin solid #f2f2f2;
border-radius: 5px;
top: 5px;
left: 5px;
}
.searchTerm {
float: left;
border-style: none;
padding: 5px;
height: 20px;
outline: none;
}
.searchButton {
right: -50px;
width: 30px;
height: 20px;
border: 1px solid #f2f2f2;
background: #f2f2f2;
border-radius: 5px;
text-align: center;
color: #ccc;
vertical-align: middle;
cursor: pointer;
}
<div className="searchWrap">
<input type="text" className="searchTerm" placeholder="Search..." />
<button type="submit" className="searchButton">
<Icon name='search' />
</button>
</div>
I'm using React. Here is my result so far:
The external border is rounded, ok, that's what I need, but the separation between the searchTerm and the searchButton is also rounded, and I need a plain separator here, something like:
I'm using font awesome here, so the code isn't spaced like your screenshot, but looks like you have your own library you're using with react for that icon and your spacing is fine.
All you need to do is use border-radius: 0 5px 5px 0 to keep the left side borders from rounding, and assign a border-left on the .searchButton to draw the vertical line. I changed the border color so it's more prominent, but you can use whatever color you want.
*{margin:0;padding:0;}
.searchWrap {
position: absolute;
top: 5px;
left: 5px;
}
.searchTerm {
float: left;
border-style: none;
padding: 5px;
height: 20px;
outline: none;
margin-left: 3px;
border: thin solid #ddd;
border-width: thin 0 thin thin;
border-radius: 5px 0 0 5px;
}
.searchButton {
right: -50px;
width: 30px;
height: 32px;
border: 1px solid #f2f2f2;
background: #f2f2f2;
border-radius: 0 5px 5px 0;
text-align: center;
color: #ccc;
vertical-align: middle;
cursor: pointer;
border: thin solid #ddd;
}
.searchTerm:focus, .searchTerm:focus + .searchButton {
border-color: red;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="searchWrap">
<input type="text" class="searchTerm" placeholder="Search..." />
<button type="submit" class="searchButton">
<i class="fa fa-search"></i>
</button>
</div>
Try this for the search button css instead of border-radius
.searchButton {
...
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
...
}
Can you use bootstrap? Relatively simple, and once you have it, modify the css the way you want it.
https://v4-alpha.getbootstrap.com/components/input-group/#button-addons
Bootstrap is strongly recommended for this. See http://getbootstrap.com/components/#input-groups. Coupled with FontAwesome, you could do something like this:
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="fa fa-search"></span>
<span class="sr-only">Search</span>
</button>
</span>
</div>
I have an issue with the positioning of a textbox and button, where it doesn't display correctly under Chrome.
Here is an example from each browser, as you can see the textbox under Chrome is pushed out of position.
Internet Explorer/Firefox
Chrome
html:
<div id="divSearch">
<input type="text" id="txtSearch" placeholder=" Search..."/>
<input type="submit" id="btnSearch" value=""/>
</div>`
css:
input[type=text]{
width: 200px;
height: 24px;
border: none;
border-radius: 3px 0px 0px 3px;
-webkit-border-radius: 3px 0px 0px 3px;
-webkit-appearance: none;
-moz-appearance: none;
padding: 0;
}
input[type="submit"]{
border: none;
border-radius: 0px 3px 3px 0px;
-webkit-appearance: none;
-moz-appearance: none;
-webkit-border-radius: 0px 3px 3px 0px;
width: 32px;
height: 24px;
background: url(../img/search_button.png) no-repeat;
background-color: white;
background-position: 10px 5px;
}
#divSearch{
float: right;
width: 300px;
height: 40px;
white-space: nowrap;
margin-right: 50px;
}
Now if I remove the height from input[type="submit"] the positioning is fine except the button is now the wrong size.
I can't work out why the height of the button causes the issue. Any advice on how to fix it?
Thanks
Add the following code. It should work:
input[type=text]{
float:left
}
Make the button value non-empty will resolve this.
<input type="submit" id="btnSearch" value=" "/>
The root cause is the button has no text baseline.
how i can change button to have border-radius: 6px; and to by active marked when i will select it. Here is my HTML code and i also have CSS. When i make <button class:active i get only active button without css style
<div align="center">
<label>Period selection</label>
<button class="button: active" id="Day" style="height:25px; width:60px; margin: 4px 2px" type="submit" onclick="setImage('1');">Day</button>
<button class="button: active" id="Week" style="height:25px; width:60px; margin: 4px 2px" type="submit" onclick="setImage('2');">Week</button>
<button class="button: active" id="Month" style="height:25px; width:60px; margin: 4px 2px" type="submit" onclick="setImage('3');">Month</button>
</div>
.ctButton,
.button,
body div.ui-dialog div.ui-dialog-buttonpane div.ui-dialog-buttonset button.ui-button,
.ui-dialog .ui-button,
a.button,
#ctPageContent a.button,
#ctPageContent a.button:hover {
background-color: #2B2B2B;
border: 0px;
display: inline-block;
padding: 3px 10px 4px;
color: #fff;
text-decoration: none;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
border-bottom: 1px solid rgba(0,0,0,0.25);
position: relative;
cursor: pointer;
margin: 4px 2px;
}
The : indicates a pseudo-class (pr pseudo-element). It is not part of the class name.
:active means "While being clicked on" (or otherwise activated).
If you want to match a class in the document, then give it a regular class name (and preferably not one that could be confused with a pseudo-class):
<button class="current"
Then use a class selector in the CSS:
.current { ... }
Add this to your css
.button:active{
border-radius: 6px;
}
In your html just add the below code.
NOTE- :active :hover should be in your css, not in your class attribute. Hence remove :active from your class attribute as below
<div align="center">
<label>
Period selection </label>
<button class="button" id="Day" style="height:25px; width:60px; margin: 4px 2px" type="submit" onclick="setImage('1') ;">
Day</button>
<button class="button" id="Week" style="height:25px; width:60px; margin: 4px 2px" type="submit" onclick="setImage('2') ;">
Week</button>
<button class="button" id="Month" style="height:25px; width:60px; margin: 4px 2px" type="submit" onclick="setImage('3') ;">
Month</button>
</div>
change
class="button:active"
to
class="button"
and add to your css
button:active {
// your button:active styling
}
In CSS, colons have a special meaning: they introduce pseudo-classes.
Therefore, if you want to select the following HTML by its class...
<button class="button:active"></button>
...you must escape the colon:
.button\:active
.button\:active {
background-color: #2B2B2B;
border: 0px;
display: inline-block;
padding: 3px 10px 4px;
color: #fff;
text-decoration: none;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
border-bottom: 1px solid rgba(0,0,0,0.25);
position: relative;
cursor: pointer;
margin: 4px 2px;
}
<button class="button:active">Button</button>
Im working on a header for a website and i have a problem with search option.
I have include an input and a button tag.
Thoose have to have a vertical-align: middle; and should be side by side.
I've try something but it doesn't work.
Can somebody explain why and how i fix that?
HTML:
<div id="main_search">
<input id="main_search_input" type="text" placeholder="Suchen" />
<button id="search_button"><img src="search.png" width="20" style="border-left: 1px solid #D7D7D7; padding: 0 0 0 5px;" alt="" title="" /></button>
</div>
CSS:
#main_search {
float: right;
line-height: 60px;
margin: 0 50px 0 0;
}
#main_search_input {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
height: 20px;
line-height: 20px;
width: 200px;
vertical-align: middle;
padding: 5px 10px 5px 10px !important;
}
#search_button {
background-color: #FFF;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
height: 30px;
padding: 5px;
vertical-align: middle;
}
FIDDLE
input and button elements are inline elements, as such by separating them by a newline in your code, this is effectively interpreted and rendered as a whitespace character, leading to a gap appearing between them.
To solve this, add:
input, button{
margin:0;
}
Then remove the new line from between the elements in your HTML:
Demo Fiddle
<body>
<div id="main_search">
<input id="main_search_input" type="text" placeholder="Suchen" /><button id="search_button">
<img src="https://cdn1.iconfinder.com/data/icons/TWG_Retina_Icons/24/magnifier.png" width="20" style="border-left: 1px solid #D7D7D7; padding: 0 0 0 5px;" />
</button>
</div>
</body>
Alternatives
(also requiring setting no margins, per above)
Float the two elements so they push up against one another
Apply a font-size:0 to #main_search so the space has a width of zero