Customizine forms with CSS

Hello everyone,

I need a little help to customize my form on the contact page.  I tried searching on the net but not an answer to my question.

I know how to change a form template in css, such as fonts, borders, background colors, text (name:, email:, etc...) colors but how I do

change the white background on the text box where people type?  Default is white, but how to change the color or make transparent (#clear)?

Thanks for your help, it's probably something simple that Ive forgotten :)

If you know how to change the borders and fonts, then you should be ready to go.  Just use the background-color for your fields .input or .textarea attribute.

A very important thing to note about transparent is that IE won't show transparency 100% or 0% transparency.  Although the CSS3 standard allows such changes, IE does not support this.  If that's what you want to do your best bet is to use Photoshop or Fireworks and save a PNG with transparency between 0 and 100.  IE7 and above and all other browsers recognize transparent PNG.

Tags: Dreamweaver

Similar Questions

  • Question about styling a form with CSS in the Template

    Hola

    I made a page from a template and I insert a form in there

    where can I style this form with CSS?

    In the model that has been generated css style?

    or

    Directly to the page?

    Furthermore, if I saw the page in explorer 8, legends looks with a black color and down (not what i intended)

    In Safari, they appear purple and where they suppose to be

    Why?

    Hope you understand

    Thank you

    Daniel Ulysse

    Please post a link to your site so that we can admire this phenomenon.

    GRAMPS

  • Can't the forms with CSS in DWCS6 style / must add menu WYSIWYG

    Hi all

    I put my two 'problems' in a single topic:

    (1) I tried to add some style on my pages of forms in them, but it seems that it does not work well, I explain: I create a php page, I insert a form with text fields (user name and password, for example) and the "login" button The form ID is "LogForm. I create a CSS class called "." FormCSS' and inside I put the rule "align text: right. I apply the rule to the form and all of the text inside goes to the right. I try online (real server and local server, I tried both) but nothing happens, the form elements to remain on the left. I tried to apply the Lun ID of the form. Nothing.

    No doubt, I'm doing something wrong. Even with the text and the tables within the shape, I can't move/change, at all. In design mode, I see all the changes, I can't online (chrome and IE). What should I do?

    (2) I create a page to insert long text in a database, as when you post in a forum. I would like to insert some kind of toolbar with options align, style and so on, as WYSIWYG editors. Is this possible? Is it possible to put a toolbar like this in DWCS6?

    Thank you

    #1 you're not comb the selectors in correct form: form, fieldset, label lable, input, textarea...

    See example of a CSS style HTML5 form. View source to see the code.

    HTML5 form with jQuery Validation

    #2 Watch CK Editor.

    CKEditor.com | The best text editor of web for all

    Nancy O.

  • T42 hide menu with CSS media query

    In an application of theme univeral if you attempt to print a page with the display left menu, it takes too much space.

    These can be removed with CSS, and I found the room to be cut after the hidden menu.

      #t_Body_nav 
        { display : none; }
      
      #t_Body_content 
        { margin-left : 0px !important; }
    

    Yet, when they are wrapped in a media query, during print preview or emulation (image) the margin on the left is in the spotlight, but the body remains behind

    @media print {
      #t_Body_nav 
        { display : none; }
      
      #t_Body_content 
        { margin-left : 0px !important; }
    }
    

    978-1-4842-0962-2_figure_20-emulation.png

    I don't see what else I might need to include?

    Basic sample

    workspace: swesley

    user: otn

    PWD:Forum

    App: 88776

    Note that I'm only interested in the media query, not printer_friendly solution. Although I have not there is no friendly t42 model, printer only honour which is described in the documentation.

    Scott

    Hi Scott

    I think it's the transform that you are missing:

    @media print {
      form .t-Body #t_Body_nav {
        display: none;
      }
      form .t-Body .t-Body-main {
        margin-left: 0;
        -webkit-transform: none;
        transform: none;
      }
      form .t-Body .t-Body-main>div {
        margin-left: 0 !important;
      }
    }
    

    A bit of fiddling with the specificity of the selector is necessary to avoid !important directives on everything.

  • Refining of shape and style with CSS

    Hello
    I am new to forms of style with CSS. Have just completed my first http://www.jaydaniells.com/Client/charter/cp-corpsite/feedback.html here... .wish to refine the style so.

    Would red * (marking required fields) next to my physically larger labels (for example 15px or 140%). My stylesheet is here http://www.jaydaniells.com/Client/charter/cp-corpsite/cmscss/feedbackform.css - haven't tried to solve myself, but for some unknown reason to me (maybe that's a problem cascading) I am currently prevented resize the *'s (which are anchored with < em > tags).

    Would also like for the position of the text of 'Privacy' < p > alongside the "send comments" button (to the right of the button as opposed to the bottom of the, as it is currently). Do you use floats? If so, how exactly.

    Please in the hope that someone more experienced than me could offer quick solutions?

    Thanks in advance,
    Jay

    JD800 wrote:
    > Thank you - grateful for the help.
    >
    > The answer did not work:
    > em {}
    > do-size: 18px;
    > make-weight: bold;
    > > }
    >
    > This has however:
    > >


    > >>
    ><>
    > class = "Privacy" > privacy statement
    > >


    >
    > Thanks again,.
    > JD
    >
    >

    in fact, why use (it's for italics, but * do probably not even exist in italics)

    Instead, each * in a span tag (rather than em)
    and the style of the span tag

    . Star {}
    do-size: 18px;
    make-weight: bold;
    }

    *

    --
    SEB ([email protected])
    http://webtrans1.com | high-end web design
    Downloads: Slideshow, browser directory, mailing list

  • Source of the region with css script

    Hi Andy -.

    I've implemented the shape with the source of the region of css scripts. After the filling of data by default for an item, I tried to print the form using the print mode, the data appeared at the top of the form, it no longer is displayed in the input field.

    I want to be able to print the form with the integrated data (mode friendly printer), is - it possible using scripts css as the source of the region?

    Thank you
    Yivon

    Hello

    Paste the HTML into a post is a bit of a pain.

    First of all, you must surround your code with {code} tags. Second, all the < and > characters must be replaced by & lt; and & gt; Finally, all Roger has to be replaced by & amp; I tend to type/paste code in a text editor and then make replaces overall.

    Thus, for example, to display:

    < div > blah blah < / div >

    You must enter:

    {code}
    & lt; div & gt; Blah blah & lt; / div & gt;
    {code}

    Andy

  • A problem with the display in a form with a ScatterGraph

    Hi all!
     
    Now, I want to do an image that can be expanded outside and inside with the viewport in a form with a ScatterGraph window. I tried previously to do this picture as a backdrop, but the backgroundpicture cannot be zoomed with the display window. How can I solve this problem?

    Here is the picture:

    Or I have to calculate a large amout of points to sign on the coordination of xy without the image, and how can I register quickly because it takes a long time to calculate.

    Hello

    You can zoom/dΘplacer an image as well as the plot in charts. Here is a snippet of code showing how you can do it.

    Normal
    0

    fake
    fake
    fake

    EN-US
    X NONE
    X NONE

    MicrosoftInternetExplorer4

    / * Style definitions * /.
    table. MsoNormalTable
    {mso-style-name: "Table Normal";}
    MSO-knew-rowband-size: 0;
    MSO-knew-colband-size: 0;
    MSO-style - noshow:yes;
    MSO-style-priority: 99;
    MSO-style - qformat:yes;
    "mso-style-parent:" ";" "
    MSO-padding-alt: 0 to 5.4pt 0 to 5.4pt;
    MSO-para-margin-top: 0;
    MSO-para-margin-right: 0;
    MSO-para-margin-bottom: 10.0pt;
    MSO-para-margin-left: 0;
    line-height: 115%;
    MSO-pagination: widow-orphan;
    font-size: 11.0pt;
    font family: 'Calibri', 'sans-serif ';
    MSO-ascii-font-family: Calibri;
    MSO-ascii-theme-make: minor-latin;
    mso-fareast-font-family: "Times New Roman";
    mso-fareast-theme-make: minor-fareast.
    MSO-hansi-font-family: Calibri;
    MSO-hansi-theme-make: minor-latin ;}
    table. MsoTableGrid
    {mso-style-name: "Table Grid";}
    MSO-knew-rowband-size: 0;
    MSO-knew-colband-size: 0;
    MSO-style-priority: 59;
    MSO-style-unhide: no;
    black border: solid 1.0pt;
    MSO - border - themecolor:text1;
    MSO-border-alt: solid black .5pt;
    MSO - border - themecolor:text1;
    MSO-padding-alt: 0 to 5.4pt 0 to 5.4pt;
    MSO - border - black insideh:.5pt United.
    MSO-border-insideh - themecolor:text1;
    MSO - border - black insidev:.5pt United.
    MSO-border-information - themecolor:text1;
    MSO-para-margin: 0;
    MSO-para-margin-bottom: .0001pt;
    MSO-pagination: widow-orphan;
    font-size: 11.0pt;
    font family: 'Calibri', 'sans-serif ';
    MSO-ascii-font-family: Calibri;
    MSO-ascii-theme-make: minor-latin;
    MSO-hansi-font-family: Calibri;
    MSO-hansi-theme-make: minor-latin ;}

    Image img =
    Bitmap.FromFile ("myImage.jpg");

    in pixels, this is the place
    where the image will be drawn

    RectangleF initialRectangle = Rectangle.Empty;

    in the data, to map coordinates the
    image

    XRange range;

    Range yRange;

    Private Sub PlotMyData()

    {

    plot your data here

    xData double [] = new double [] {3, 5, 7, 5, 8, 3, 7, 8, 2, 6};

    Double]
    yData = new double [] {9, 1, 2, 6, 8, 3, 3, 6, 2, 2};

    scatterGraph1.PlotXY (xData, yData);

    xRange and yRange define the plot area limits left-top to bottom-right

    xRange = new range (xAxis1.Range.Minimum, xAxis1.Range.Maximum);

    yRange =
    new range (yAxis1.Range.Minimum, yAxis1.Range.Maximum);

    RecalculateImageBounds();

    }

    Simply map the data coordinates
    values in pixels

    posts from the top left and lower right must be mapped.

    Private Sub RecalculateImageBounds()

    {

    PointF
    size = scatterPlot1.MapDataPoint (scatterGraph1.PlotAreaBounds,
    (xRange.Maximum, yRange.Minimum);

    initialRectangle.Location =
    scatterPlot1.MapDataPoint (scatterGraph1.PlotAreaBounds, xRange.Minimum,
    yRange.Maximum);

    initialRectangle.Width = size. X - initialRectangle.Location.X;

    initialRectangle.Height = size. Y - initialRectangle.Location.Y;

    }

    Just draw the image.

    Private Sub scatterGraph1_BeforeDrawPlot (sender As object, BeforeDrawXYPlotEventArgs
    (e)

    {

    RecalculateImageBounds();

    e.Graphics.DrawImage (img, initialRectangle.X, initialRectangle.Y,
    (initialRectangle.Width, initialRectangle.Height);

    }

    Make sure that the image is of good quality so that you can zoom in pretty close.

    I hope this helps.

  • a simple form with the "submit" button: can it look better?

    Hi all

    I did not imagine that a simple form (with Textfields and ChoiceFields) could do a lot of problems:

    I would like to ask a few basic questions about it. First the code (Simplified):

       GridFieldManager formfm;    
    
            EditField surname = new EditField("", "-", 25, Field.FIELD_LEFT | Field.FIELD_VCENTER | EditField.FILTER_DEFAULT);
        EditField email = new EditField("", "-", 25, Field.FIELD_LEFT | Field.FIELD_VCENTER | EditField.FILTER_EMAIL);
    
        public FormFieldManager(){
    
            formfm = new GridFieldManager(2,0);
    
            formfm.add(new LabelField("who: ", Field.FIELD_RIGHT | Field.FIELD_VCENTER));
            String[] choicewho = new String[] { "Mr", "Mrs", "Miss" };
            ObjectChoiceField who = new ObjectChoiceField("", choicewho, 0, Field.FIELD_LEFT |Field.FIELD_VCENTER);
    
            formfm.add(who);
    
        formfm.add(new LabelField("Surname :", Field.FIELD_RIGHT | Field.FIELD_VCENTER));
        formfm.add(surname);
    
        formfm.add(new LabelField("E-Mail :", Field.FIELD_RIGHT | Field.FIELD_VCENTER));
        formfm.add(email);
    
        ButtonField sendButton = new ButtonField("Send", Field.FIELD_HCENTER|ButtonField.CONSUME_CLICK);
        formfm.add(sendButton);
        FieldChangeListener listenerSendButton = new FieldChangeListener() {
        public void fieldChanged(Field field, int context) {
    
        try {
            String data = "send=true&surname=" +surname.getText();
            data += "&email=" + email.getText();      httpPost("http://bla/sendData.php", data);
        } catch (IOException e1) {
            e1.printStackTrace();
        }
        formfm.deleteAll();
        formfm.add(new LabelField("Grazie!"));
        }
      };
      sendButton.setChangeListener(listenerSendButton);
    

    now my questions:

    (1) don't miss something (style) for the EditFields? At the present time, it is possible to change them, but the behavior (9700 Simulator) is strange: it is 'difficult' to get from one field to the other and everything moves sometimes when editing...

    How do you define a standard form that seems 'normal' and can be completed as expected in other applications? (Swifts nothing, it is possible to access the next field with the expected key / trackpad (I have no touch screen)) and so on?

    The EditFields do not even have a border, but I guess that's the standard case on BlackBerry.

    (2) the ObjectChoiceField is also very ugly... It's too big... Is it not possible to reduce the size without much effort? (I couldn't everride it correctly). (I also tried with radio buttons, but unfortunately I can't add a RadioButtonGroup to my LayoutManager, strange)

    (3) it is perhaps a stupid question: I can't get the text selected from the ObjectChoiceField (to send it can in data).

    AM EditField, it's simple:

    editfield.getText()
    

    But how is it with my ChoiceField?

    I found getSelectedIndex() but it provides a value int not text...

    Thanks in advance for any suggestions!

    silizia

    1. you have defined fields as follows:

    EditField family name = new EditField ("vorname:", "-", 20, EditField.FILTER_DEFAULT);

    The 20 means 20 characters, so it's all the field allows you to enter.

    2. Yes, the mail filter is pretty useless.  Use the EmailAddressEditField instead

    3. you can play with the scroll, but the best thing to do is to set the focus on the first field that you want people to pull together - usually the upper part of the form.

  • PDF form with several auto pages copy text in fields on the following pages

    I created a PDF form with multiple pages. I started with an Illustrator file, then exported to Acrobat to make it complete. For some reason any, however, when users enter text on the first page and try to continue on the other, the text on the first page only auto copies on the following pages. And if you delete what was on the second page (or third) to enter the correct data, which provides information on the first page.

    I guess it must be something that twisted when I was creating the form, so I don't know if there is a way to fix without all over again.

    Thank you!

    Give a unique name to each field. The fields with the same name are copies of each other and will automatically have the same value.

  • Chart seamless with CSS?

    Any suggestions on making a cultivable surface chart so there is no seam when repeating graphics with CSS?

    Cut or crop the document to the size of the image. Use Image > size to the dimensions of the Image in pixels.

    The image size dialog box

    Use the offset filter and enter 1/2 the size you've seen in the size of the image.

    You should now see the border of the image in the Center

    Use a clone or heal tool to remove this edge

    You should now have a transparent image

  • call report forms (with or without parameters) oracle apex

    Hello

    I want to know if I can call report forms (with or without parameters) oracle apex?

    Thanks in advance

    Try to look at this blog: Roels Blog: integration of forms and the APEX: APEX calling forms

    Thank you

    Tony Miller
    Software LuvMuffin
    Ruckersville, WILL

  • How to create a form with a submit in CC button animate using Actionscript 3

    How to create a form with a submit in CC button animate using Actionscript 3. The file will first be a SWF but will also have the flexibility to export as HTML5

    I've searched high and low for an example of code for this entry.

    Can someone help me please?

    Thank you

    You can use the same graphic assets of basis for two projects, but the coding will be different for everyone.  You must work on the project of a code at a time.

  • I created a form with checkboxes.  A question has two boxes for a 'yes' another being a 'no '.  I just want to be able to select a single box, but currently, I choose both

    I created a form with checkboxes, I have currently two checkboxes in a question that I wish I could only check a box and make it mandatory that should be checked only one box.  Currently, I am able to select the two check boxes.

    Give them the same field name, but export values.

  • Can I evaluate and fill out a form with data from a custom data object?

    I'm not a developer, but I'm trying to find as much information for my web team so they can implement this for me.  We use the E10.

    I have some information for the contacts stored in a data object custom I want to use for pre-population information access door and in another form.  For example:

    1. User enters his email address into a form and hands
    2. A search and contact and custom data object (CDO)
      1. If the contact has a CDO with the required information, he fills the following form with the information
      2. If the contact does not have the required ORDER, it displays information and a link to the place where to go next

    Is it possible, and where should I direct my developers learn more about treatments?

    Richard

    Hi Richard,

    You can certainly do so using data for the Eloqua Web search (Setup > data Web Look Ups). A database search allows you to request data stored in Eloqua, bring up the page and with a few JS, we determine if they will go on track 1 or 2 you described above.

    Is that an advanced feature requires knowledge of HTML and JS. Here is a good article on data search that should help:

    Using the Eloqua Cookie to customize your Web site

    If you have any specific questions, our support team is very familiar with this feature and can help to solve problems or answer specific questions.

    -Andrew.

  • I made a form for my clients, I did this form with a button "submit" button, the button will save the form and send it, I did the URL to go to a different (different to mine) e-mail address but when I distribute the form and it is complete

    I made a form for my clients, I did this form with a button "submit" button, the button Save the form and send it, I did the URL to go to a different (different to mine) e-mail address but when I distribute the form and it is supplemented by my clients it send to my email address not the URL how to change this.

    No matter how you have configured the Send button when you use the feature distribute the form. There are some e-mail address is in your identity preferences (Edit > preferences > identity) and use it. If you can change the email address it or not to use distribute the form and the button send the value you want.

    One thing that happens when you use the feature to distribute the form is the form is enabled Reader, you can do separately, but you really shouldn't do if the form must be used by others. The dispenser a form must activate using their copy under license of Acrobat Reader.

Maybe you are looking for