如何添加填充以形成选择元素？

时间：2017-03-19 14:10:11

标签： html css forms

在Chrome＆amp; Safari，当我添加填充时，它实际上不会更改选择器元素周围的填充。换句话说，当我这样做时：

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

什么都没发生。

如果有人可以帮我添加填充到Chrome（＆amp; Safari）上的表单元素，我们将不胜感激！

＆＃13;
＆＃13; 
@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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：2)

您也可以尝试一下。我刚刚做了一次改变。

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

可以使用-webkit-appearance: none

更改select的默认行为

＆＃13;
＆＃13; 
@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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

为了能够为rm -rf libxcb.so.1元素设置样式，您需要使用appearance CSS属性进行选择，并将其值设置为select。这是因为默认情况下它使用正在渲染选择的平台的本机样式。

来自MDN：

  

外观CSS属性指示是否显示元素   使用基于操作系统主题或的主题的平台本机样式   不

如果将属性设置为none，我们告诉渲染引擎不要使用本机样式，这样它就会继承所有自定义样式。

下面是设置样式的示例：

none

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;
}

答案 2 :(得分：-2)

可能有效的一个简单解决方案是，代替：select{ padding: 20px 20px 20px 20px; }执行：select{ padding: 20px 20px 20px 20px !important; }

现在，重要的是，这种风格很重要。这意味着它将覆盖相同样式但没有重要的其他样式。

希望有所帮助， Ben A.K.A BlackSky

相关问题
最新问题