I am trying to create a customized search box. I tried the following but getting weird results.
this is my css code
.inputboxSearch {
margin: 0 0 1em 0;
border: 1px solid #333333;
background:url('images/searchbox.png') no-repeat;
padding-right:20px;
}
where, searchbox.png is a full a image (180*30 png) of a searchbox. Then i have tghe following code.
<input class="inputboxSearch" type='text' name='search' size='25'/>
But, how it appears is that, the search box image comes inside of the input box, and it is only half displayed. Rest is not visible. But wat i expected was, the search box should encompass the input box. The revers is happening here anyways. How to solve this
Set .inputboxSearch border to none, and increase its height to 30px:
.inputboxSearch {
background: url("images/searchbox.png") no-repeat scroll 0 0 transparent;
border: none;
height: 30px;
margin: 0 0 1em;
padding-right: 20px;
}
Related
I have forked this codepen from chris coyer example and I am wanting to make the label move to the top instead of the bottom as his was doing.
In so doing, I simply can't get the cursor/carrot to move to the bottom instead of staying at the top, and so when you type, it overwrites the label and is a mess. The code to move label (still called go-bottom but that doesn't matter)
form.go-bottom {
input {
padding: 12px 12px 12px 12px;
}
label {
top: 0;
bottom: 0;
left: 0;
width: 100%;
}
input:focus {
padding: 4px 6px 20px 6px;
}
input:focus + label {
top: 100%;
margin-top: -36px;
}
}
I've tried various padding settings on the input and for some reason none are affecting the cursor position itself - if anyone can help adjust it that would be great. (this is purely css/sass based and don't want any JS or other)
Bonus points for changing the transition animation to go from bottom to top instead of top to bottom :)
You could try adding more top padding and less bottom padding for the input on focus.
input:focus {
padding: 17px 6px 4px 6px;
}
I would play with overall padding too if your going to try this approach, the inputs feel cluttered when 2 lines of copy.
Basic css question here.
Every time I press "Check all", the button populates with the names from a list (which is fine).
The issue is: The button width itself expands and gets bigger. I want to keep it fixed. Furthermore, how can I set a limit to the number of list items it can show? So for example, if there are a lot of items, after "test 5", a "..." should appear.
By the way: this is all in my custom.css, .btn-default is actually from bootstrap, but I wanted to change some things in my multi select-class. I changed caret margin because the caret was right beside the text, I wanted it to be to the VERY right, maybe that's what's messing everything up??
custom.css :
.sv-manage-multiselect-dropdown {
.btn-default {
background-image: none;
border: 1px solid #ADA9A9;
padding: 6px 8px 1px 8px ;
}
.btn .caret {
margin-left: 160px;
margin-bottom:5px;
}
}
Html:
<td class="col-xs-2">
<am-multiselect class="sv-manage-multiselect-dropdown"
ng-model="Mylist.names"
options="Names.name for link in Mylist"
multiple="true"
ms-selected="{{Mylist.names}}"
</am-multiselect>
</td>
Before:
After:
Have you tried using max-width in your css?
max-width: 40px;
For example.
Hope this helps!
I looked in angular-multiselect/src/multiselect.tmpl.html, adding this css should work, 10px is just for the example, put width and height of the checkmark, like this <i> will fill same place even if it's void:
.sv-manage-multiselect-dropdown {
ul.dropdown-menu > li > i{
display: inline-block;
min-width: 10px;
min-height: 10px;
}
}
I'm trying to make an HTML search form similar to Amazon's. I created the desired look, but when I went to actually try the search the text box wasn't taking any input. At first I thought the text was white or something but after clicking the search button I realized this was not the case. I have tried using Chrome's Inspect Element to see the problem and when I hovered over the input box code, the input box was showing beneath the code.
Here's the JSFiddle.
This is the CSS for the box but I don't see an issue here:
#search-text
{
font-size: 14px;
color: #ddd;
border-width: 0;
background: transparent;
}
#search-box input[type="text"]
{
width: 90%;
padding: 11px 0 12px 1em;
color: #333;
outline: none;
}
I'm not sure whether the other elements are interfering or if something is wrong with the search box. How do I fix this issue?
Add float left to .select-style:
.select-style {
...
float: left;
...
}
Lower the width of #search-box input[type="text"]. 80% seems good:
#search-box input[type="text"] {
width: 80%;
...
}
I'm trying to create a styled button that has a single character centred inside it.
I'm using "border-image" and "border-width" to create a button that I could stretch to larger content (that ability has been lost in this simplified scenario...).
My problem is this: when the button is small (specifically, when the button is little more than 2*border-width), the content is not centred. I've tried 'conventional' techniques like margin: 0 auto; but don't seem to be having any joy. Using a dumb-button class without these border properties I can get what I want (see below)
This neatly demonstrates the problem. I would like the characters centred in the styled buttons:
http://jsfiddle.net/rjmLy/
(works in Chrome/Safari, and this is targeting Webkit only)
(example of the themed button from http://girliemac.com/blog/2011/07/29/five-css-tricks-used-in-enyo)
My CSS is as follows:
.fancy-button {
border-image: url(http://girliemac.com/sandbox/images/alert-button.png) 0 14 111 14 fill repeat repeat;
border-width: 0 14px;
box-sizing: border-box;
font-size: 16px;
height: 37px;
line-height:37px;
text-align: center;
margin: 0 auto;
width: 28px;
}
.centerme {
position:relative;
margin:0 auto;
}
.dumb-button {
font-size: 16px;
height: 37px;
line-height: 37px;
text-align: center;
width: 28px;
background-color: red;
margin: 0 auto;
}
The HTML looks like this. The centerme class was an attempt to try centring a new div on top of the old shape. It doesn't work for me. The dumb-button versions look correct (but dull...)
<div class="fancy-button">I</div>
<div class="fancy-button">W</div>
<div class="fancy-button"><div class="centerme">W</div></div>
<div class="dumb-button">I</div>
<div class="dumb-button">W</div>
<div class="dumb-button"><div class="centerme">W</div></div>
Any help would be greatly appreciated.
You're building the button with a CSS3 Sprite and a border-image attribute where the start of the left side of the button is 14px wide and the start of the right side of the button is 14px wide.
In your CSS you set the width of the button to 28px: The problem is that this leaves no room for any text that you put in the middle of the button and therefore the letter is overlapping onto part of the border-image.
In order to fix this you could simply increase the width of the button to about 42px or larger.
.fancy-button {
border-image: url(http://girliemac.com/sandbox/images/alert-button.png) 0 14 111 14 fill repeat repeat;
border-width: 0 14px;
box-sizing: border-box;
font-size: 16px;
height: 37px;
line-height:37px;
text-align: center;
margin: 0 auto;
width: 42px;
}
Here's a working fiddle: http://jsfiddle.net/QYrzS/
But, if you really want to keep the images that small - things are a little more difficult. One option is wrapping the content of each button (the single letter) in a <div> and then manually setting the margin for each. For example:
HTML
<div class="fancy-button"><div class="centerme">W</div></div>
CSS
.centerme {
margin-left:-7px;
}
This is kind of hacky and will need to be manually adjusted (since each letter is a different width).
Here's a working demo: http://jsfiddle.net/rjmLy/
Notice that the letter i is not centered. You would need to specify the correct margin for the individual <div> that holds that letter in order to fix that.
Here's a screenshot.
And my CSS markup:
.submitbutton
{
background: url("/Content/SiteImages/button.png") no-repeat scroll 0 0 transparent;
color: white;
cursor: pointer;
height: 26px;
width: 76px;
margin-left: 8px;
margin-top: 12px;
}
Also, I'd like the background image to stretch to fit into the dimensions of the button. Currently it's displaying full size (I think). Any tips for this new HTML web developer?
HTML buttons always have a border, simply setting border:0; should fix this.
Try stating
background: 0; outline: 0;
on it.
Note: This should only be used for testing purposes, disabling the outline makes people who navigate with their keyboards to not receive feedback when focusing on your button.
If it works, try using a more subtle outline.