Can someone direct me to a good Textbox replacement or css design for the standart one.
I think the regular one is boring but functioning well. I just need to make it look nicer.
Thanks.
In the resulting HTML page TextBox is rendered as a standard input element:
<input type="text" />
So, you may apply any sort of CSS styling for it, there is no need for another control. As for CSS example, you may start from here to get some ideas.
Apply CSS on MarkUp like this.
<asp:TextBox ID="TextBox1" runat="server" CssClass="textbox" />
CSS
.textbox{
behavior: url(border-radius.htc);
border: 1px solid #CCCCCC;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding: 6px 6px 4px;
box-shadow: 2px 3px 2px #eee;
-moz-box-shadow: 2px 3px 2px #eee;
-webkit-box-shadow: 2px 3px 2px #eee;
background: -webkit-gradient(linear, left top, left 15, from(#FFFFFF), color-stop(4%, #f4f4f4), to(#FFFFFF));
background: -moz-linear-gradient(top, #FFFFFF, #f4f4f4 1px, #FFFFFF 15px);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#f4f4f4');
}
Before that download http://curved-corner.googlecode.com/files/border-radius.htc and place it in the same folder the CSS resides.
Demo: http://jsfiddle.net/naveen/YqRCU/2/
http://jsfiddle.net/533eV/1/ maybe it is to simple, but you could play with shadows, or change colors ect.
I now saw this website which shows many nice text inputs (check #44 out):
http://html-generator.weebly.com/css-textbox-style.html
Related
I have some nicely styled CSS submit buttons, but the margin attribute doesn't seem to be working when two buttons fall side by side. Please see my image sample, below.
The buttons simply fall into a single div, like so:
<div>
<input type="submit" value="Confirm My Order.">
<input type="submit" value="Revise My Order.">
</div>
Here is the CSS:
input[type=submit]{
margin:0.6em,2em,1em,1em; /* Right margin (2nd value) is not working */
background: #808080;
padding: 5px 12px; /* padding inside the button */
border:1px solid #808080;
cursor:pointer;
-webkit-box-shadow: inset 0px 1px 0px #808080, 3px 5px 0px 0px #696969, 5px 10px 5px #999;
-moz-box-shadow: inset 0px 1px 0px #808080, 3px 5px 0px 0px #696969, 5px 10px 5px #999;
box-shadow: inset 0px 1px 0px #808080, 3px 5px 0px 0px #696969, 5px 10px 5px #999;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
color:#fff;
}
Given the right margin, I wouldn't think that the buttons would kiss like this. Any thoughts why the margin may not be working?
My thanks to you in advance.
If you inspect it using chrome devtools or similar, you will see that it notifies you of "Invalid Property Value". This is due to a syntax error. You want your css to be this
input[type=submit]{
margin:0.6em 2em 1em 1em; /* Right margin (2nd value) is now working */
The rest should be fine
Same as answer given but an explanation that is better.
When using multiple inputs into the margin css, you don't want to use the commas a simple space between each value is what's required.
input[type=submit]{
margin:0.6em 2em 1em 1em;
}
For further explanations on margins view this helpful link:
https://developer.mozilla.org/en-US/docs/Web/CSS/margin
How can I make a shadow effect like the one below with pure CSS?
I am new to CSS.
The following is what I have tried so far, but I am unable to come close to what I want. Please advise how I can make it look like the shadow in the image? Thanks!
box-shadow: 1px 1px 5px #999999 inset
This is the closest I could get : Demo. I think it's actually not bad.
It combines a black shadow and a white one on top of it.
.yourclass{
background-color: #fff;
box-shadow: -15px 0px 60px 25px #ffffff inset,
5px 0px 10px -5px #000000 inset;
}
Browsers' shadows smoothing might differ. I'm using chrome so you might want to tweek the values to get a cross-browser visual effect...
Read the CSS Tricks article about box-shadows to get how they're used.
For two shadows (both sides) you need 4 shadows (demo) :
Result:
.yourclass{
background-color: #fff;
box-shadow: 0px 100px 50px -40px #ffffff inset,
0px -100px 50px -40px #ffffff inset,
-5px 0px 10px -5px rgba(0,0,0,0.5) inset,
5px 0px 10px -5px rgba(0,0,0,0.5) inset;
}
Beware, browsers' shadows rendering/smoothing can differ a lot. I'm using chrome so you might want to tweek the values to get a cross-browser visual effect...
For more info on css shadows, read this article from CSS Tricks
What you want is basically the opposite of a page curl shadow. Take a look at this tutorial - you should be able to easily adapt it.
Here is an example: jsFiddle
div {
position: relative;
width: 250px;
height: 150px;
margin: 100px auto;
border: 1px solid black;
background-color: white;
}
div:after {
position: absolute;
height: 80%;
width: 10px;
content: " ";
right: 0px;
top: 10%;
background: transparent;
box-shadow: 0 0px 10px rgba(0, 0, 0, 0.3);
z-index: -1;
}
We insert a pseudo-element, position it below our div and have it cast a shadow. This way, you have control over the shadows height and position.
I've got a PIE folder in my libraries directory, and css3pie module folder in my modules directory.
I've got the following css in my layout.css:
#block-block-1, #block-block-7, #triptych, #block-block-8 {
border: 1px solid #EEEEEE;
padding: 10px 20px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: #666 0px 2px 3px;
-moz-box-shadow: #666 0px 2px 3px;
box-shadow: #666 0px 2px 3px;
background: #EEEEEE;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#EEEEEE), to(#FFFFFF));
background: -webkit-linear-gradient(#EEEEEE, #FFFFFF);
background: -moz-linear-gradient(#EEEEEE, #FFFFFF);
background: -ms-linear-gradient(#EEEEEE, #FFFFFF);
background: -o-linear-gradient(#EEEEEE, #FFFFFF);
background: linear-gradient(#EEEEEE, #FFFFFF);
-pie-background: linear-gradient(#EEEEEE, #FFFFFF);
behavior: url(/../libraries/pie/PIE.htc);
}
I've enabled the module and have the following option selected: Use theme settings
Use selector settings from theme info file.
The rounded corners are not working in IE, but they are working in Firefox. What am I missing?
This site uses css3pie and it's meant to be working, but for me, on IE8 the corners are not rounded.
Perhaps try removing the first forward slash in your behavior line and see if that helps.
Try adding a position: relative into you CSS statement. I've had that issue a couple of times and it's normally resolved by doing that. Further information can be found at: http://css3pie.com/documentation/known-issues/.
I'm searching for the biggest mistakes that you can make in your CSS code; CSS rules that slow down the browser speed (rendering).
For example:
.myDraggables {
box-shadow: 0px 1px 2px #000 inset;
-moz-box-shadow: 0px 1px 2px #000 inset;
-webkit-box-shadow: 0px 1px 2px #000 inset;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#cdcdcd, endColorstr=#fff);
background: -webkit-gradient(linear, left top, left bottom, from(#cdcdcd), to(#fff));
background: -moz-linear-gradient(top, #cdcdcd, #fff);
border-radius:5px 7px 1px 3px;
-moz-border-radius:5px 7px 1px 3px;
-webkit-border-radius:5px 7px 1px 3px;
}
If you have 10 draggable elements (many tags inside) with this class, the drag would be very slow (jerk).
So, does anybody know a list of CSS rules that you shouldn't use?
One that's easy to make: using a tiny image (lets say 5x5) as a background repeat for big areas is slow when it comes to rendering. So it's advisable to use a bigger picture for repeat patterns (eg. 50x50). The size of a file increases just a bit, but the performance is way better.
Avoid long paths i.e.
body div div ul li span a {}
Avoid css expressions i.e.
background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );
And anything that microsoft implemented i.e. DX etc.
Assigning overflow settings to the elements slows the scrolling in mobile browsers
For once, ff and ie comply. But in this instance chrome doesnt like it.
We have a field, with autosuggest attached, that appears after x amount of letters. Cannot really put a demo on fiddle, as its db driven.
However here is the css
.suggestionsBox {
z-index: 2;
position: absolute;
margin: 70px 0px 0px 146px;
width: 207px;
background-color: #ffffff;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border: 1px solid #cccccc;
color: #000;
box-shadow:-1px -1px 7px #ccc, 1px 1px 7px #ccc;
-webkit-box-shadow:-1px -1px 7px #ccc, 1px 1px 7px #ccc;
-moz-box-shadow:-1px -1px 7px #ccc, 1px 1px 7px #ccc;
}
.suggestionList {
margin: 0px;
padding: 0px;
}
.suggestionList li {
list-style: none;
margin: 3px 3px 3px 3px;
padding: 3px;
cursor: pointer;
}
.suggestionList li:hover {
background-color: #ffffcc;
}
And screenpic of ff , ie chrome appearance. Any suggestions, I am usually bloody good with css. But this has me stumped.
As requested here is html for this element:
<div class="field"><label for="propertysuburb">Suburb </label> <input name="propertysuburb" id="inputString" onkeyup="lookup(this.value);" onblur="fill();" size="50" type="text" class="medium" /></div>
<div class="suggestionsBox" id="suggestions" style="display: none;">
<div class="suggestionList" id="autoSuggestionsList">
</div>
</div>
What does the margin for the .suggestionsBox do? As an absolutely positioned element, I believe it will just ignore that.
The issue seems to be that you're not setting any top / bottom / left / right values to your absolutely positioned .suggestionsBox div; this leaves it up to the browser to determine where to put it.
Make sure your .field class has "position: relative;" on it, then add a "top: 20px;" and "right: 0px;" to your .suggestionsBox styles. Just adjust the top / right values if it doesn't line up correctly.
First off, a nitpick.
When using CSS3 with vendor prefixes, ALWAYS use the non-prefixed version last, otherwise you may (potentially) break something:
-webkit-box-shadow:-1px -1px 7px #ccc, 1px 1px 7px #ccc;
-moz-box-shadow:-1px -1px 7px #ccc, 1px 1px 7px #ccc;
box-shadow:-1px -1px 7px #ccc, 1px 1px 7px #ccc;
As for your problem: I can't see the CSS for the .field div, but I assume it has a positioning context set as well (probably relative), otherwise the z-index on suggestionBox wouldn't work, and judging by the screenshots, it does. Now, what you haven't set is the actual position. The absolute positioning context should place the box in the top left corner of its parent (obviously, that's why the parent needs a positioning context too). If you need it to start at the parent's bottom, you also need to add top: 100%; to your .suggestionBox properties.
I can't really see anything else that might be wrong here.
To debug something like this, I would slightly modify your back-end code so that the suggestion list remains fixed and open, regardless of typed input. Load the page, then open the developer pane in Chrome, go to the Elements tab, and use the "magnifying glass" icon to inspect the misplaced elements. Play with the styles panel to discover which attributes are causing the incorrect offset (don't forget to try things like absolute vs. fixed position of the element or its parents). Once you have an idea of where things are going wrong, see if the "fix" is benign in other browsers.
This looks like it's most-likely a JavaScript issue. The suggestion list is most likely placed programmatically (given the position: absolute it seems certain), so I'd look to that code.
If it's not a JavaScript issue, the other possibility is that the "position parent" of the absolute element differs. Your CSS shows that the suggestion box is positioned absolutely, but we cannot see from your posted code what establishes the baseline for the position (how its nearest-positioned ancestor is defined).
One thing that can sometimes help with absolute positioning is to use the top style rather than the margin-top to move your absolutely-positioned element down.
Thanks to #mingos and #russelluresti
We have this fixed now:
css:
.suggestionsBox {
z-index: 2;
top: 59px;
right: 524px;
position: absolute;
margin: 69px 0px 0px 146px;
width: 207px;
background-color: #ffffff;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border: 1px solid #cccccc;
color: #000;
-webkit-box-shadow:-1px -1px 7px #ccc, 1px 1px 7px #ccc;
-moz-box-shadow:-1px -1px 7px #ccc, 1px 1px 7px #ccc;
box-shadow:-1px -1px 7px #ccc, 1px 1px 7px #ccc;
}
and field :
.form .field { width: 50%; float: left; position:relative;}
Cheers Guys, perfect. I havent got Safari, but it works in the 3 I was interested in, and seems to be valid code now, which supports proper rules. Many thanks