CODEWITHSUNDEEP
htmlcssforms
14wml
14wml

Reputation: 4166

How to add padding to form select element?

On Chrome & Safari, when I add padding, it does not actually change the padding around the selector element. In other words, when I do:

select{
    padding: 20px 20px 20px 20px;
}

Nothing happens.

If someone could help me add padding to the form element on Chrome (& Safari) that would be greatly appreciated!

@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500');

body {
    margin: 0;
}

/*General styling*/
button:focus,
.inputfile:focus + label, 
select:focus,
input:focus {
    outline: white auto 5px;
}

.form-screen {
    background: #3472FF;
    color: white;
    font-family: 'Roboto', 'sans-serif';
}

.close {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 2em;
    color: white;
}

.close:hover {
    color: #d8d8d8;
}

.form-wrapper {
    padding-top: 5%;
    padding-bottom: 5%;
}

.form-wrapper h1 {
    text-transform: uppercase;
    font-weight: 500;
    text-align: center;
    font-size: 3em;
}

/*Style input file*/
.box{
    text-align: center;
    margin-bottom: 35px;
}

.inputfile {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    z-index: -1;
}

.inputfile + label {
    max-width: 80%;
    font-size: 1.4em;
    font-weight: 500;
    text-transform: uppercase;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    display: inline-block;
    overflow: hidden;
    padding: 20px 20px 20px 20px;
    border-radius: 5px;
}

.inputfile + label svg {
    width: 1em;
    height: 1em;
    vertical-align: middle;
    fill: currentColor;
    margin-top: -0.25em;
    /* 4px */
    margin-right: 0.25em;
    /* 4px */
}

.inputfile + label {
    color: #3472FF;
    background-color: white;
}

.inputfile:focus + label,
.inputfile.has-focus + label,
.inputfile + label:hover {
    background-color: #d8d8d8;
}


/*Form input elemnts*/
input[type="text"],
.submit, select{
    display: block;
    margin: 0 auto;
}

input[type="text"] {
    cursor: text;
}

select{
    cursor: pointer;
    margin-bottom: 40px;
}


input[type="text"], select{
    border: none;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    color: #3472FF;
    font-size: 2em;
    padding: 20px 20px 20px 20px;
    margin-bottom: 40px;
    width: 60%;
}

input[type="text"]::-webkit-input-placeholder {
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    color: #3472FF;
    font-size: 1em;
}

input[type="text"]:-ms-input-placeholder {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    color: #3472FF;
    font-size: 1em;
}

input[type="text"]:-moz-placeholder {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    color: #3472FF;
    font-size: 1em;
}

input[type="text"]::-moz-placeholder {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    color: #3472FF;
    font-size: 1em;
}

.submit:hover {
    background-color: #d8d8d8;
}

.submit {
    background-color: white;
    color: #3472FF;
    font-size: 2em;
    text-transform: uppercase;
    padding: 20px 20px 20px 20px;
    border-radius: 7px;
    border: none;
}

/*Datepicker styling*/


/*Set datepicker’s width, position it to the center and add drop shadow*/

.ui-datepicker {
    width: auto;
    height: auto;
    margin: 5px auto 0;
    font: .7em 'Roboto', sans-serif;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .10);
    -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .10);
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .10);
    background-color: #fafafb;
}


/*Remove the default underline decoration from every anchor tag*/

.ui-datepicker a {
    text-decoration: none;
}


/*add 100% width for the table, so it will have the same maximum width as the wrapper above (i.e. widith: auto)*/

.ui-datepicker table {
    width: 100%;
}


/*style header*/

.ui-datepicker-header {
    text-transform: uppercase;
    background-color: #fafafb;
    font-size: 1.2em;
    color: #555555;
    font-weight: bold;
    line-height: 30px;
}


/*center the Month position.*/

.ui-datepicker-title {
    text-align: center;
}


/*Set up arrows*/

.ui-datepicker-prev,
.ui-datepicker-next {
    display: inline-block;
    width: 30px;
    height: 30px;
    text-align: center;
    cursor: pointer;
    background-repeat: no-repeat;
    line-height: 600%;
    overflow: hidden;
}


/*Replace the Next and Prev text with the sprite arrow images and adjust arrow position*/

.ui-datepicker-prev {
    float: left;
    background-position: center 10px;
    background-image: url('../images/arrow_prev.png');
    /*Images created by me (Monica Ong)*/
}

.ui-datepicker-next {
    float: right;
    background-position: center 10px;
    background-image: url('../images/arrow_next.png')
}


/*Set colors of day names*/

.ui-datepicker thead {
    background-color: #efefef;
}

.ui-datepicker th {
    text-transform: uppercase;
    font-size: .7em;
    padding: 5px 0;
    color: #666666;
}


/*Style dates*/

.ui-datepicker tbody td {
    padding: 0;
}

.ui-datepicker tbody td {
    padding: 0;
}


/*Style default,  hover, and active state*/

.ui-datepicker td span,
.ui-datepicker td a {
    display: inline-block;
    font-weight: bold;
    text-align: center;
    width: 30px;
    height: 30px;
    line-height: 30px;
    color: #666666;
}

.ui-datepicker-calendar .ui-state-default {
    background: #ededed;
}

.ui-datepicker-unselectable .ui-state-default {
    background: #f4f4f4;
    color: #949496;
}

.ui-datepicker-calendar .ui-state-hover {
    background: #f7f7f7;
}

.ui-datepicker-calendar .ui-state-active {
    background: #666666;
    color: #efefef;
    position: relative;
    margin: -1px;
}

.ui-datepicker-calendar td:first-child .ui-state-active {
    width: 29px;
    margin-left: 0;
}

.ui-datepicker-calendar td:last-child .ui-state-active {
    width: 29px;
    margin-right: 0;
}

.ui-datepicker-calendar tr:last-child .ui-state-active {
    height: 29px;
    margin-bottom: 0;
}
<div class="form-screen">
        <button class="close"><span class="icon-x"></span></button>
        <form method="post" enctype="multipart/form-data">
            <div class="form-wrapper">
                <h1>Upload Photo</h1>
                <div class="box">
                    <input type="file" name="file[]" id="file" class="inputfile" data-multiple-caption="{count} files selected" multiple />
                    <label for="file">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewBox="0 0 20 17">
                            <path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z" /> </svg> <span>Choose a file&hellip;</span> </label>
                </div>
                <select name="image-album" class="col">
                    <option value="" selected>Add to album</option>
                    <option value="1">Beauty Gurus</option>
                    <option value="2">Cute Food</option>
                </select>
                <input type="text" name="photo-title" placeholder="Title" required>
                <input type="text" name="date-created" class="date" placeholder="Date Created" required>
                <input type="text" name="caption" placeholder="Caption">
                <input type="text" name="credt" placeholder="Credit*">
                <button type="submit" class="field submit" name="submit" value="submit">Upload Photo</button>
            </div>
        </form>
    </div>

Upvotes: 0

Views: 3233

Answers (3)

Gayathri Mohan
Gayathri Mohan

Reputation: 161

You may try this too. I have just made a css change.

    .col {
      padding: 40px;
      -webkit-appearance: none;
    }

The default behavior of select can be changed by using -webkit-appearance: none

@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500');

body {
    margin: 0;
}

/*General styling*/
button:focus,
.inputfile:focus + label, 
select:focus,
input:focus {
    outline: white auto 5px;
}

.form-screen {
    background: #3472FF;
    color: white;
    font-family: 'Roboto', 'sans-serif';
}

.close {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 2em;
    color: white;
}

.close:hover {
    color: #d8d8d8;
}

.form-wrapper {
    padding-top: 5%;
    padding-bottom: 5%;
}

.form-wrapper h1 {
    text-transform: uppercase;
    font-weight: 500;
    text-align: center;
    font-size: 3em;
}

/*Style input file*/
.box{
    text-align: center;
    margin-bottom: 35px;
}

.inputfile {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    z-index: -1;
}

.inputfile + label {
    max-width: 80%;
    font-size: 1.4em;
    font-weight: 500;
    text-transform: uppercase;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    display: inline-block;
    overflow: hidden;
    padding: 20px 20px 20px 20px;
    border-radius: 5px;
}

.inputfile + label svg {
    width: 1em;
    height: 1em;
    vertical-align: middle;
    fill: currentColor;
    margin-top: -0.25em;
    /* 4px */
    margin-right: 0.25em;
    /* 4px */
}

.inputfile + label {
    color: #3472FF;
    background-color: white;
}

.inputfile:focus + label,
.inputfile.has-focus + label,
.inputfile + label:hover {
    background-color: #d8d8d8;
}


/*Form input elemnts*/
input[type="text"],
.submit, select{
    display: block;
    margin: 0 auto;
}

input[type="text"] {
    cursor: text;
}

select{
    cursor: pointer;
    margin-bottom: 40px;
}

.col {
     padding: 20px;
    -webkit-appearance: none;
}

input[type="text"], select{
    border: none;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    color: #3472FF;
    font-size: 2em;
    padding: 20px 20px 20px 20px;
    margin-bottom: 40px;
    width: 60%;
}

input[type="text"]::-webkit-input-placeholder {
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    color: #3472FF;
    font-size: 1em;
}

input[type="text"]:-ms-input-placeholder {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    color: #3472FF;
    font-size: 1em;
}

input[type="text"]:-moz-placeholder {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    color: #3472FF;
    font-size: 1em;
}

input[type="text"]::-moz-placeholder {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    color: #3472FF;
    font-size: 1em;
}

.submit:hover {
    background-color: #d8d8d8;
}

.submit {
    background-color: white;
    color: #3472FF;
    font-size: 2em;
    text-transform: uppercase;
    padding: 20px 20px 20px 20px;
    border-radius: 7px;
    border: none;
}

/*Datepicker styling*/


/*Set datepicker’s width, position it to the center and add drop shadow*/

.ui-datepicker {
    width: auto;
    height: auto;
    margin: 5px auto 0;
    font: .7em 'Roboto', sans-serif;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .10);
    -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .10);
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .10);
    background-color: #fafafb;
}


/*Remove the default underline decoration from every anchor tag*/

.ui-datepicker a {
    text-decoration: none;
}


/*add 100% width for the table, so it will have the same maximum width as the wrapper above (i.e. widith: auto)*/

.ui-datepicker table {
    width: 100%;
}


/*style header*/

.ui-datepicker-header {
    text-transform: uppercase;
    background-color: #fafafb;
    font-size: 1.2em;
    color: #555555;
    font-weight: bold;
    line-height: 30px;
}


/*center the Month position.*/

.ui-datepicker-title {
    text-align: center;
}


/*Set up arrows*/

.ui-datepicker-prev,
.ui-datepicker-next {
    display: inline-block;
    width: 30px;
    height: 30px;
    text-align: center;
    cursor: pointer;
    background-repeat: no-repeat;
    line-height: 600%;
    overflow: hidden;
}


/*Replace the Next and Prev text with the sprite arrow images and adjust arrow position*/

.ui-datepicker-prev {
    float: left;
    background-position: center 10px;
    background-image: url('../images/arrow_prev.png');
    /*Images created by me (Monica Ong)*/
}

.ui-datepicker-next {
    float: right;
    background-position: center 10px;
    background-image: url('../images/arrow_next.png')
}


/*Set colors of day names*/

.ui-datepicker thead {
    background-color: #efefef;
}

.ui-datepicker th {
    text-transform: uppercase;
    font-size: .7em;
    padding: 5px 0;
    color: #666666;
}


/*Style dates*/

.ui-datepicker tbody td {
    padding: 0;
}

.ui-datepicker tbody td {
    padding: 0;
}


/*Style default,  hover, and active state*/

.ui-datepicker td span,
.ui-datepicker td a {
    display: inline-block;
    font-weight: bold;
    text-align: center;
    width: 30px;
    height: 30px;
    line-height: 30px;
    color: #666666;
}

.ui-datepicker-calendar .ui-state-default {
    background: #ededed;
}

.ui-datepicker-unselectable .ui-state-default {
    background: #f4f4f4;
    color: #949496;
}

.ui-datepicker-calendar .ui-state-hover {
    background: #f7f7f7;
}

.ui-datepicker-calendar .ui-state-active {
    background: #666666;
    color: #efefef;
    position: relative;
    margin: -1px;
}

.ui-datepicker-calendar td:first-child .ui-state-active {
    width: 29px;
    margin-left: 0;
}

.ui-datepicker-calendar td:last-child .ui-state-active {
    width: 29px;
    margin-right: 0;
}

.ui-datepicker-calendar tr:last-child .ui-state-active {
    height: 29px;
    margin-bottom: 0;
}
<div class="form-screen">
        <button class="close"><span class="icon-x"></span></button>
        <form method="post" enctype="multipart/form-data">
            <div class="form-wrapper">
                <h1>Upload Photo</h1>
                <div class="box">
                    <input type="file" name="file[]" id="file" class="inputfile" data-multiple-caption="{count} files selected" multiple />
                    <label for="file">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewBox="0 0 20 17">
                            <path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z" /> </svg> <span>Choose a file&hellip;</span> </label>
                </div>
                <select name="image-album" class="col">
                    <option value="" selected>Add to album</option>
                    <option value="1">Beauty Gurus</option>
                    <option value="2">Cute Food</option>
                </select>
                <input type="text" name="photo-title" placeholder="Title" required>
                <input type="text" name="date-created" class="date" placeholder="Date Created" required>
                <input type="text" name="caption" placeholder="Caption">
                <input type="text" name="credt" placeholder="Credit*">
                <button type="submit" class="field submit" name="submit" value="submit">Upload Photo</button>
            </div>
        </form>
    </div>

Upvotes: 2

cnorthfield
cnorthfield

Reputation: 3501

In order to be able to style the select element how you'd like you need to use the appearance CSS property for the select and set it's value to none. This is because by default it uses the native styling of the platform that the select is being rendered in.

From MDN:

The appearance CSS property indicates whether to display an element using platform-native styling based on the operating system's theme or not.

If you set the property to none, we are telling the rendering engine not to use the native styles so it will then inherit all of your custom styles.

Heres an example of setting the styles:

select {
  cursor: pointer;
  margin-bottom: 40px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}


@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500');
body {
  margin: 0;
}


/*General styling*/

button:focus,
.inputfile:focus+label,
select:focus,
input:focus {
  outline: white auto 5px;
}

.form-screen {
  background: #3472FF;
  color: white;
  font-family: 'Roboto', 'sans-serif';
}

.close {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 2em;
  color: white;
}

.close:hover {
  color: #d8d8d8;
}

.form-wrapper {
  padding-top: 5%;
  padding-bottom: 5%;
}

.form-wrapper h1 {
  text-transform: uppercase;
  font-weight: 500;
  text-align: center;
  font-size: 3em;
}


/*Style input file*/

.box {
  text-align: center;
  margin-bottom: 35px;
}

.inputfile {
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  z-index: -1;
}

.inputfile+label {
  max-width: 80%;
  font-size: 1.4em;
  font-weight: 500;
  text-transform: uppercase;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  display: inline-block;
  overflow: hidden;
  padding: 20px 20px 20px 20px;
  border-radius: 5px;
}

.inputfile+label svg {
  width: 1em;
  height: 1em;
  vertical-align: middle;
  fill: currentColor;
  margin-top: -0.25em;
  /* 4px */
  margin-right: 0.25em;
  /* 4px */
}

.inputfile+label {
  color: #3472FF;
  background-color: white;
}

.inputfile:focus+label,
.inputfile.has-focus+label,
.inputfile+label:hover {
  background-color: #d8d8d8;
}


/*Form input elemnts*/

input[type="text"],
.submit,
select {
  display: block;
  margin: 0 auto;
}

input[type="text"] {
  cursor: text;
}

select {
  cursor: pointer;
  margin-bottom: 40px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

input[type="text"],
select {
  border: none;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  color: #3472FF;
  font-size: 2em;
  padding: 20px 20px 20px 20px;
  margin-bottom: 40px;
  width: 60%;
}

input[type="text"]::-webkit-input-placeholder {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  color: #3472FF;
  font-size: 1em;
}

input[type="text"]:-ms-input-placeholder {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  color: #3472FF;
  font-size: 1em;
}

input[type="text"]:-moz-placeholder {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  color: #3472FF;
  font-size: 1em;
}

input[type="text"]::-moz-placeholder {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  color: #3472FF;
  font-size: 1em;
}

.submit:hover {
  background-color: #d8d8d8;
}

.submit {
  background-color: white;
  color: #3472FF;
  font-size: 2em;
  text-transform: uppercase;
  padding: 20px 20px 20px 20px;
  border-radius: 7px;
  border: none;
}


/*Datepicker styling*/


/*Set datepicker’s width, position it to the center and add drop shadow*/

.ui-datepicker {
  width: auto;
  height: auto;
  margin: 5px auto 0;
  font: .7em 'Roboto', sans-serif;
  -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .10);
  -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .10);
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .10);
  background-color: #fafafb;
}


/*Remove the default underline decoration from every anchor tag*/

.ui-datepicker a {
  text-decoration: none;
}


/*add 100% width for the table, so it will have the same maximum width as the wrapper above (i.e. widith: auto)*/

.ui-datepicker table {
  width: 100%;
}


/*style header*/

.ui-datepicker-header {
  text-transform: uppercase;
  background-color: #fafafb;
  font-size: 1.2em;
  color: #555555;
  font-weight: bold;
  line-height: 30px;
}


/*center the Month position.*/

.ui-datepicker-title {
  text-align: center;
}


/*Set up arrows*/

.ui-datepicker-prev,
.ui-datepicker-next {
  display: inline-block;
  width: 30px;
  height: 30px;
  text-align: center;
  cursor: pointer;
  background-repeat: no-repeat;
  line-height: 600%;
  overflow: hidden;
}


/*Replace the Next and Prev text with the sprite arrow images and adjust arrow position*/

.ui-datepicker-prev {
  float: left;
  background-position: center 10px;
  background-image: url('../images/arrow_prev.png');
  /*Images created by me (Monica Ong)*/
}

.ui-datepicker-next {
  float: right;
  background-position: center 10px;
  background-image: url('../images/arrow_next.png')
}


/*Set colors of day names*/

.ui-datepicker thead {
  background-color: #efefef;
}

.ui-datepicker th {
  text-transform: uppercase;
  font-size: .7em;
  padding: 5px 0;
  color: #666666;
}


/*Style dates*/

.ui-datepicker tbody td {
  padding: 0;
}

.ui-datepicker tbody td {
  padding: 0;
}


/*Style default,  hover, and active state*/

.ui-datepicker td span,
.ui-datepicker td a {
  display: inline-block;
  font-weight: bold;
  text-align: center;
  width: 30px;
  height: 30px;
  line-height: 30px;
  color: #666666;
}

.ui-datepicker-calendar .ui-state-default {
  background: #ededed;
}

.ui-datepicker-unselectable .ui-state-default {
  background: #f4f4f4;
  color: #949496;
}

.ui-datepicker-calendar .ui-state-hover {
  background: #f7f7f7;
}

.ui-datepicker-calendar .ui-state-active {
  background: #666666;
  color: #efefef;
  position: relative;
  margin: -1px;
}

.ui-datepicker-calendar td:first-child .ui-state-active {
  width: 29px;
  margin-left: 0;
}

.ui-datepicker-calendar td:last-child .ui-state-active {
  width: 29px;
  margin-right: 0;
}

.ui-datepicker-calendar tr:last-child .ui-state-active {
  height: 29px;
  margin-bottom: 0;
}
<div class="form-screen">
  <button class="close"><span class="icon-x"></span></button>
  <form method="post" enctype="multipart/form-data">
    <div class="form-wrapper">
      <h1>Upload Photo</h1>
      <div class="box">
        <input type="file" name="file[]" id="file" class="inputfile" data-multiple-caption="{count} files selected" multiple />
        <label for="file">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewBox="0 0 20 17">
                            <path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z" /> </svg> <span>Choose a file&hellip;</span> </label>
      </div>
      <select name="image-album" class="col">
                    <option value="" selected>Add to album</option>
                    <option value="1">Beauty Gurus</option>
                    <option value="2">Cute Food</option>
                </select>
      <input type="text" name="photo-title" placeholder="Title" required>
      <input type="text" name="date-created" class="date" placeholder="Date Created" required>
      <input type="text" name="caption" placeholder="Caption">
      <input type="text" name="credt" placeholder="Credit*">
      <button type="submit" class="field submit" name="submit" value="submit">Upload Photo</button>
    </div>
  </form>
</div>

Upvotes: 1

Ben
Ben

Reputation: 57

One simple solution that may work is to, instead of: select{ padding: 20px 20px 20px 20px; } Do: select{ padding: 20px 20px 20px 20px !important; }

Now, !important makes that style, well, important. Meaning that it will override other styles that are the same style but without !important.

Hope that helps, Ben A.K.A BlackSky

Upvotes: -3

Related Questions