0

I want to make textfield with only bottom border.

ths css

.input {
    border: 0;
    outline: 0;
    background: transparent;
    border-bottom: 2px solid black;
    width: 20px;
}

    <input type="text" name="art-title" class="input"  maxlength="14" autofocus placeholder="Title"/>

It can worked without Foundation.

But it not worked with Foundation.

There are ways to solve it?

update:

    <html>

    <head>
     <title>Editor</title>
    <link rel="stylesheet" href="/styles/editor.css" />
    <link rel="stylesheet" href="/styles/lib/foundation.min.css">
  </head>
        <body>
          <form>

       <input type="text" name="art-title" class="art-input"  maxlength="14" autofocus placeholder="Title"/>
    </form>
        <div class="art-container">

          <div class="form">
            <input type="text" name="art-title" class="title-input"  maxlength="14" autofocus placeholder="Title"/>
            <div class="cover-img">
              <input type="file" name="userPhoto" id="file" placeholder="Cover"/>
              <input type="submit" value="Upload" id="cover-img-submit">
            </div>
          </div>
          <div id="editor">
            <p>sdesdssssssssssssssssss</p>
          </div>
        </div>

        <script src="/scripts/lib/jquery.js"></script>
        <script src="/scripts/lib/aloha.min.js"></script>
        <script src="/scripts/editor.js"></script>
      </body>

    </html> 

css:

.art-container {
    width: 57rem;
    margin-left: auto;
    margin-right: auto;
}


.title-input {
    background-color: transparent;
    border: none;
    border-bottom: 2px solid #000000;
    outline: none;
    padding-bottom: 5px;
   width: 100%;
    text-align: center;
    font-size: 300%;
}

When I import Foundation css file, the textfield with only bottom borde not worked.

6
  • Your issue probably has to do with CSS Specificity. Foundation's styles are more specific than yours or you are including your styles before Foundation's styles.
    – hungerstar
    Mar 25, 2015 at 15:22
  • I tried, but not worked.
    – Aby-Chan
    Mar 25, 2015 at 15:27
  • You will need to supply more code. We have no idea of how you are applying your CSS and in what order etc. Saying, "I tried, but not worked." doesn't help us a whole lot. We cannot verify what you have done. Please include the HTML where you're including your CSS along with all CSS being included. You might even want to create a jsFiddle (jsfiddle.net).
    – hungerstar
    Mar 25, 2015 at 16:49
  • Is editor.css where you defined all your custom styles? Like your .input, .art-container and .title-input CSS classes? If so, did you try swapping the order of foundation.min.css and editor.css?
    – hungerstar
    Mar 26, 2015 at 3:01
  • 1
    I'm pretty sure you're running into a specificity issue. See this jsFiddle as an example, jsfiddle.net/fjkn9L90. The .title-input class I wrote sets the height of the input to 100px. As you can see it is not 100px. Even though that class is defined after foundation.min.css is included in the page, foundation.min.css has a CSS selector that is more specific than the one I defined so the input's height is not changed to 100px. You can compare their selector input[type="text"] to your selector .title-input here: specificity.keegan.st.
    – hungerstar
    Mar 26, 2015 at 3:12

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.