Cool CSS3 form styling select - can I replicate this in buttons?

I stumbled across a very nice looking CSS styling for select input forms using the following CSS definitions:
body {
background-color: rgb(12,12,12);
color: rgb(192,192,192);
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 13px;
.selectLIST {
background-color: rgb(32,32,32);
border: 0;
font-size: 12px;
Just create a little select form referencing these classes - it's looks GREAT! I have tried without success to apply this style behavior to both "submit" and "button" inputs. Any suggestions to replicate this styling in buttons? I am by no means an expert in CSS styling so I may be missing something rather obvious.
FYI - this effect works nicely in both Safari and the Chrome/Mac browsers. SOL when it comes to FF/IE/Opera/Camino - I've tried. It looks like these effects are tied to the Webkit rendering engine.
TIA ----

Definition and Usage:
The <select> tag is used to create a select list (drop-down list).
The <option> tags inside the select element define the available options in the list.
What you have done with the select (your above example) is to turn it into a Class tag. Here's the proper way to use a select tag in a web page.
<!--
<select name="cars" id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
#Cars is your syyle id in the CSS. Copy the below example into TextEdit...save as plain text with the .html extension. Works both in Safari and FireFox:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
background-color: #CCCCCC;
#cars{
font-family: "Times New Roman", Times, serif;
font-size: 18px;
color: #FFFF00;
background-color: #006699;
-->
</style></head>
<body>
<select name="cars" id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</body>
</html>
-->
There are tons of examples on how the use the select tag on the internet.
http://www.w3schools.com/TAGS/tag_Select.asp
Or you can Google 'select tag html' for more examples.
Message was edited by: David M Brewer

Similar Messages

  • How can i replicate this images drop shadow exactly

    How can i replicate this images drop shadow exactly from scratch
    http://i52.tinypic.com/2u41t7n.jpg
    If this sort of thing is not covered on this forum please direct me to an off site forum that would help me with this graphics question

    Trial and error, putting both the reference image and your new experimental image up side by side, is the only way I know.  I'd probably use the Info panel as well, to see that I'm getting the same or very similar color numbers from the new drop shadow.
    You can probably use the Magic Wand set to a very low tolerance value to select and copy the light colored object, then make a new document with a white background, paste in the copied object, then start experimenting with drop shadow.  Alternatively you could just redraw a portion of it.
    -Noel

  • Can anyone replicate this JSTL problem?

    The following code fails in tomcat 6:
    <c:if test="${not empty requestScope.form && not empty requestScope.form.result}">
    </c:if>but this one works fine:
    <c:if test="${not empty requestScope['form'] && not empty requestScope['form.result']}">
    </c:if>

    I can't replicate the problem easily.
    The tiles exception is potentially hiding the real exception. Check your logs for a root cause.
    I presume "result" is actually an attribute of your "form" object which is an attribute in request scope?
    Here is a test page that I threw together. It should compile and run as is.
    All three scenarios work - where both form and result are present, when just form is present and result is null, and when both are null.
    I would probably go looking into your Form and Result objects.
    <%@ page language="java" contentType="text/html; charset=ISO-8859-1"
        pageEncoding="ISO-8859-1"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Eclipse Java Test Page</title>
    </head>
    <body>
    <h1>Test page</h1>
    <h2> Server Info </h2>
    Server info = <%= application.getServerInfo() %> <br>
    Servlet engine version = <%=  application.getMajorVersion() %>.<%= application.getMinorVersion() %><br>
    JSP version = <%= JspFactory.getDefaultFactory().getEngineInfo().getSpecificationVersion()  %> <br>
    Java version = <%= System.getProperty("java.vm.version") %><br>
    Java home = <%= System.getProperty("java.home") %><br>
    Session id = <%= session.getId() %><br>
    <%!
      public class Wrapper{
        String result = null;;
        public String getResult(){
          return result;
        public void setResult(String result) {
          this.result = result;
    %>
    <%
        Wrapper form = new Wrapper();
        form.setResult("Hello!");
        Wrapper form2 = new Wrapper();
        request.setAttribute("form", form);
        request.setAttribute("form2", form2);
    %>
        <h2>form</h2>
        <c:out value="${not empty requestScope.form }"/><br>
        <c:out value="${not empty requestScope.form.result }"/><br>
        <c:if test="${not empty requestScope.form && not empty requestScope.form.result }">And == true</c:if><br>
        <h2>form2</h2>   
        <c:out value="${not empty requestScope.form2 }"/><br>
        <c:out value="${not empty requestScope.form2.result }"/><br>
        <c:if test="${not empty requestScope.form2 && not empty requestScope.form2.result }">And == true</c:if><br>
        <h2>form3</h2>
        <c:out value="${not empty requestScope.form3 }"/><br>
        <c:out value="${not empty requestScope.form3.result }"/><br>
        <c:if test="${not empty requestScope.form3 && not empty requestScope.form3.result }">And == true</c:if><br>   
    </body>
    </html>

  • Ultrabeat weirdness - can you replicate this? urgent advice needed

    I am using the kick drum from the default patch in one of my tracks - the weird think is that when i look at the master output channel the right level is hitting about 4 db higher than the left.... is anyone else able to replicate this or better still explain it or let me know if I should be worried.
    cheers
    Ivan

    Can you hear it?
    You know you can pan every individual sound in UB? And you can SOLO every slot, and investigate one by one? Also: are there any insert or send effects active?

  • Mac OSX (10.9.5) IDCC2014 - potential caption bug - can anyone replicate this fault?

    Hello everybody.
    I have encountered a strange situation with live captions in InDesign. To demonstrate this issue, I have made a new indesign file, and the information for the live caption uses the Camera option from the metadata dropdown in the live caption setup.
    I placed an image that had been saved from the digital camera into InDesign and that displayed the correct name for the camera. All good so far.
    I then opened the file in photoshop, did no manipulations to it other than save it as a slightly different filename and save it as a JPG. When I placed this into indesign and applied the live caption to this image, the caption is replaced with <No data from link>.
    I then opened THAT file back in photoshop, did no manipulations to it other than to save it as a PSD. When I placed this into indesign and applied the live caption to this image, the caption displays the correct name of the camera.
    Finally, I then opened the photoshop file, once again made no manipulations to it other than to save it as a JPG with a slightly different name. Again, when placed into indesign and applied the live caption to the image, it was again replaced with <No data from link>.
    I have checked Bridge and the Camera information is the same in the Camera Data (Exif) portion of the metadata in Bridge. Similarly, I have gone into the links palette in InDesign and selected utilities/XMP file info, and all camera data is displaying the correct camera information, even though the caption is not displaying the camera information.
    Confused? Maybe this screenshot of what I have done will help.
    To me, it looks like the live caption feature is not importing XMP information correctly. Has anyone else encountered a similar situation? If not, is anyone able to replicate the fault that I have experienced?

    I feared as much. I've also tried saving as a tiff file, made no difference. I've submitted as a bug to Adobe - Feature Request/Bug Report Form , they must think I have nothing else to do at the moment.
    I should add for those reading this post that this doesn't mean all information is being disregarded by the live captions, it looks like just specific camera information. Filenames, descriptions... these come in fine.

  • How can I replicate this menu?

    Sorry for the vague question title, but I'm simply trying to find how to replicate the on this BC site: http://www.de-air.com.au/
    I'm fairly new to BC, so the more info, the better. I assume I just need to add some CSS to my menu and add the appropriate script. But I have no idea how to put this together.
    Many thanks, warren

    Yep you can. CSS HTML Only menu option, Menu Module V2, CSS and a bit of javascript or CSS3 for the animation.

  • How can I replicate this analog TV warping effect on text?

    I've tried using the puppet warp, but creating additional points seems to give the curves unnatural "kinks" that don't match up with the effect I'm trying to achieve.
    I'm also seeing a sort of duplicating effect that's happening, with a second "blackout" that's kind of emerging from the top, but I'm less worried about that. Just wondering how to get this kind of warping. Can anyone help?

    It's doable, but needs a bit of user input.
    Stretching the text without blocking up the cross-bars at the top and bottom is the first problem, but you can get round that with Content Aware Scale.
    Lay down the text and Rasterize.
    Drag rectangular selections across the bottom and top of the text and save the selection.  (I should probably dragged a third selection round the 'B' cross-bar.)
    Select all > Content Aware Scale > Protect in the Options bar, and choose the selection you saved.  Stretch the text.
    Now just distort with Liquify adjusting brush size and pressure to suit.  (I did try other options, but Liquify was the only one that did not soften the edges.
    Fairly close to your original I'd say.

  • I have many pdfs that have the identical structure, but are NOT forms. How can I collect this data?

    I have dozens of pdfs which have the identical structure, but are NOT forms. I would like to collect data across these pdfs to analyze. Is there a way to do this?

    There are a number of ways that text can be extracted, but it may not be in the order that you'd expect or want. But if it's consistent in any case, you should be able to get at the content you're interested in. JavaScript can be used to loop through the "words" on a page, for example. I've used this approach for several projects that required data extraction.

  • I type information on a form and submit. I get an error message that the information is missing even though I see it on the form. How can I resolve this problem?

    I type information on a form and click submit. I get an error message that states that the information is missing even though I see it on the form. (Error message: Please type valid first name). How can I resolve?
    == URL of affected sites ==
    http://https://ushsbc71.recruitmax.com/MAIN/CareerPortal/candidate_update.cfm?szOrderID=88393&szCoverLetter=yes

    Please see [[Use the Adobe Reader plugin to view or download PDF files]]

  • Can Java replicate this?

    Hello,
    Back "in the day" many of us enjoyed the Infocom text adventures (now called interactive fiction.) The one thing that made the games very fun to play with was the "recognition" of english speech. The programs were very smart about taking what you typed in and applying the appropriate response (allowing for the fact that you followed the rules).
    I would think that Java could mimic this but I want to make sure before I attempt to build an interactive fiction game in Java. Granted I have no idea how to go about it, but that's another story!
    Also, how suited is Java to deliver a finished retail product of this sort - whether by download or off the shelves at best buy?
    Thanks
    Tom

    Yeah, I have actually heard of Google, thanks.
    My point in asking in a forum was to get some people
    who are familair with Java and get their insight
    directly.
    So it's more a matter of can I figure out how to do
    it - Java should be fully capable. Thanks.Java is definitely fully capable, although there are already existing scripting languages that may be even easier. If you do choose Java, however, there are a great many resources to help you get started....
    The Java Tutorial - A practical guide for programmers
    Essentials, Part 1, Lesson 1: Compiling & Running a Simple Program
    New to Java Center
    How To Think Like A Computer Scientist
    Introduction to Computer Science using Java
    The Java Developers Almanac 1.4
    JavaRanch: a friendly place for Java greenhorns
    jGuru
    Bruce Eckel's Thinking in Java
    Joshua Bloch's Effective Java
    Bert Bates and Kathy Sierra's Head First Java

  • Strange- can anyone replicate this?

    Here's the issue: white color matte. 4 images, all sized 50% and parked in the corners, Each has a 10 pixel black border.
    SOMETIMES there is a faint, what looks like a 1 pixel line running through where the images touch. and sometimes it is not there. Positioning is exact, no keyframes.
    This behavior occurs in the same set of 4 clips.
    This is a head scratcher!

    NO WAIT! I got it! IT'S THE WHITE MATTE.
    Seriously, do ANY of us deserve the Green Star...? I don't think so. Well, the others, maybe. But definately NOT ME.
    Shane

  • How can i make this effect in After Effects?

    hello guys, im new to this awesome program, im using the trial version so ive limited time to learn XD
    can you tell me ho can i replicate this effect in after effect?
    http://tinypic.com/player.php?v=2ajnybc&s=6
    looks like speed effect... is there a way to replicate it in after effects?
    thank you

    CC Bender is really easy to use. Just take the default settings and animate the amount with about three keyframes.
    We can make it a lot more complicated with something like liquefy, or even Time Displacement.

  • I have created a PDF form with multiple drop downs, all with the same drop down values. When I select a value from 1 of the drop down fields, it replicates in all of the others - which I do not want. How can I fix this?

    I have created a PDF form with multiple drop downs, all with the same drop down values. When I select a value from 1 of the drop down fields, it replicates in all of the others - which I do not want. Can I fix this?

    I'm fairly new to this, but I think it has to do with the way you have the drop downs named. Did you copy one then keep pasting it in each field? If so, that is the problem. You should rename each one with a different number: Dropdown1, Dropdown2, etc. I think that might solve the issue.

  • Create a dynamic form where selected text boxes appears, based on options chosen in a drop-down box

    HELP!!! Can anyone please provide some guidance on how to create a dynamic form where selected text boxes appears, based on options chosen in a drop-down box.
    I have a form which – based on the department that's selected from a drop-down box – will have different form fields/text boxes, etc, made available.
    Is this possible in LiveCycle, if so, can you please provide the script/info - as needed.
    Thanks,

    In the preOpen event of the second dropdown list you put something like (in formCalc):
    if (dropdown1 == 1) then
    $.clearItems()
    $.setItems("Year, 2 Year,  3 Year")
    elseif (dropdown1 == 2) then
    $.clearItems()
    $.setItems("3 Year,  4 Year")
    endif

  • "Music selected can't be found or can't be opened" ??

    This is not quite like other posts I have seen on iTunes-iPhoto integration. I am using iPhoto 5.0.1 and iTunes 4.9.
    I have my iPhoto and iTunes libraries on an external harddrive. Both work just fine within each application. However, when I select music from my iTunes library to be played during a slideshow, a) it can not be played for previewing purposes (in the selection mode), and b) if I do select a song or songs, when the slideshow is started I get the following error "Music selected can't be found or can't be opened".
    Let me add one last bit of detail... I had this external harddrive situation before and things worked fine, but the harddrive decided to hiccup some time ago and I didn't have a backup ;-( Luckily DiskWarrior bailed me out for the most part and now I have a backup drive. That being said, I had to reconstruct my iTunes and iPhoto libraries. The former was in pretty good shape though there are a number of tunes that are still missing (and show the little warning icon in iTunes if they are). The tunes I am picking for the slide show are not among these. As for the iPhoto library, I created a new one and added all my old photos to the new library. I don't know if this situation is the cause of this or not. Any ideas?
    One last thing: there is one song I can play in iPhoto, it is part of an album that is intact though none of the other songs on that album can be played or used in the slideshow. This song happens to be one that I'd tried a handful of times to test things out. All of a sudden, iPhoto works only with this one song.

    Alberto,
    I have Quicktime Pro also and paid for the upgrade.
    You can try it without upgrading Quicktime, but I think the newer version of iPhoto is going to want the latest Quicktime. I am pretty sure iTunes is going to want it too. Compressing with the new H.264 codec is great. I am sure you will like the new features of QTPro.

Maybe you are looking for